<template>
  <div :class="[placeOrderForm.type=='代客下单'?'':'changeTypeSty','memberInfoDialogSty']">
    <el-dialog
      :title="placeOrderForm.title"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
      height="500px"
      @close="handleClose">
      <el-form :model="placeOrderForm" ref="placeOrderForm" :inline="true" label-width="100px">
        <el-row v-if="placeOrderForm.type=='代客下单'">
          <el-col :span="24">
            <el-divider content-position="left" style="font-size: 18px">会员信息</el-divider>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否会员：">
              <el-radio-group v-model="placeOrderForm.sfhy">
                <el-radio :label="'是'">是</el-radio>
                <el-radio :label="'否'">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="placeOrderForm.sfhy=='是'">
            <el-form-item label="选择会员：">
              <el-select
                v-model="placeOrderForm.hyList"
                multiple
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-else>
            <el-form-item label="姓名：">
              <el-input v-model="placeOrderForm.name" clearable placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号：">
              <el-input v-model="placeOrderForm.phone" clearable placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider content-position="left" style="font-size: 18px">购买类型</el-divider>
          </el-col>
          <el-col :span="24" style="margin-bottom: 5px;">
              <el-button style="float: right" type="primary" @click="selectType">选择气瓶类型</el-button>
          </el-col>
          <el-col :span="24">
            <el-table
              :data="placeOrderForm.tableData"
              border
              style="width: 100%">
              <el-table-column type="index" label="序号" width="80">
              </el-table-column>
              <el-table-column
                prop="name"
                label="图片"
                width="180">
                <template slot-scope="scope">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row.url"
                    :preview-src-list="exchangeImg(scope.row.url)">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="description"
                label="介绍"
                width="180">
              </el-table-column>
              <el-table-column
                prop="dj"
                label="单价">
              </el-table-column>
              <el-table-column
                prop="num"
                label="数量"
                width="180">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.num" clearable placeholder="请输入数量"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24" style="display: flex;justify-content: end; margin: 10px 0px;">
              <div> 数量:{{placeOrderForm.allnum}}</div>
              <div style="margin-left: 10px;"> 总金额:{{placeOrderForm.allmoney}}</div>
          </el-col>
          <el-col :span="24">
            <el-divider content-position="left" style="font-size: 18px">订单配送</el-divider>
          </el-col>
          <el-col :span="24">
            <el-form-item label="配送方式：">
              <el-radio-group v-model="placeOrderForm.psfs">
                <el-radio :label="'门店配送'">门店配送</el-radio>
                <el-radio :label="'会员自提'">会员自提</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="placeOrderForm.sfhy=='是'">
            <el-form-item label="选择地址：">
              <el-select
                v-model="placeOrderForm.hydz"
                multiple
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人：">
              <el-input v-model="placeOrderForm.lxr" clearable placeholder="请输入联系人姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：">
              <el-input v-model="placeOrderForm.lxrdh" clearable placeholder="请输入联系人手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="配送地址：">
              <el-input v-model="placeOrderForm.psdz" clearable placeholder="请输入联系人姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-else class="selectTypeSty infinite-list"  v-infinite-scroll="load"
                infinite-scroll-disabled="disabled"
                infinite-scroll-immediate="false" >
          <el-col class="infinite-list-item" style="border: 1px dashed black; margin-bottom: 5px; padding: 10px" :span="24" v-for="(item,index) of selectTypeList" :key="index">
            <div class="selectTypeMain">
              <div class="left">
                <el-image  style="width: 50px; height: 50px"
                           :src="item.imgUrl"
                           :preview-src-list="changeImgList(item.imgUrl)"
                ></el-image>
              </div>
              <div class="right">
                <div class="top">
                  <div>价格：{{item.jg}}</div>
                  <div>名称：{{item.name}}</div>
                  <el-checkbox  :model="item.id" :label="item.id">
                  </el-checkbox>
                </div>
                <div class="bottom">
                  描述：{{item.description}}
                </div>
              </div>
            </div>
          </el-col>
          <p v-if="listParams.loading">Loading...</p>
          <p v-if="listParams.finished">No More</p>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name:'memberInfoDialog',
  components: {},
  data() {
    return {
      dialogWidth:'1200px',
      dialogVisible: false,
      loading:false,
      options:[],
      listParams: {
        pageNum: 1,
        pageSize: 10,
        loading: false,
        error: false,
        finished: false,
      },
      selectTypeList:[
        {
          imgUrl:'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
          name:'111',
          jg:'1',
          js:'1212',
          id:'1'
        },
        {
          imgUrl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name:'111',
          jg:'1',
          js:'1212',
          id:'2'
        }
      ],
      checkedType:[],
      states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"],
      placeOrderForm:{
        type:'代客下单',
        title:'代客下单',
        lxr:'',
        lxrdh:'',
        psdz:'',
        hyList:[],
        sfhy:'是',
        phone:'',
        allmoney:'121',
        allnum:'1212',
        name:'',
        hydz:'',
        psfs:'门店配送',
        tableData:[
          {
            name:'111',
            description:'1111',
            dj:'9',
            num:'1',
            url:'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          }
        ]
      },
      showGasBottleForm:{
        showGasBottleDialog:false
      }
    }
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  computed: {
    disabled() {
      console.log(
        this.listParams.loading || this.listParams.finished
      );
      return this.listParams.loading || this.listParams.finished;
    },
  },
  methods: {
    //选择气瓶类型
    selectType(){
      this.placeOrderForm.type = '选择气瓶类型';
      this.placeOrderForm.title ='选择购买类型';
      this.dialogWidth = '500px';
    },
    load () {
      this.listParams.loading = true;
      if (this.listParams.finished == false) {
        this.listParams.pageNum++;
        this.getSelectTypeList();
      }
    },
    getSelectTypeList(){
      var that = this;
      var params = {
        pageNum: that.listParams.pageNum,
        pageSize: that.listParams.pageSize,
      };
      // this.$api.myHistoryController
      //   .getDemoList(params)
      //   .then((res) => {
      //     if (res.status == 1000) {
      //       if (res.body.list.length > 0) {
      //         that.demoList = that.demoList.concat(res.body.list);
      //         that.listParams.loading = false;
      //         if (res.body.list.length < that.listParams.pageSize) {
      //           that.listParams.finished = true;
      //         }
      //       } else {
      //         that.listParams.loading = false;
      //         that.listParams.finished = true;
      //       }
      //     }
      //     that.listParams.loading = false;
      //   })
      //   .catch(function () {
      //     that.listParams.error = true;
      //     that.listParams.loading = false;
      //   });
    },
    //图片预览
    changeImgList( val) {
      let list =[];
      if(val){
        list.push(val);
      }
      return list
    },
    //选择气瓶的事件
    handleCheckedCitiesChange(value){
      console.log('打印value',value);

    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //图片大图预览
    exchangeImg(row){
      let list =[];
      if(row){
        list.push(row);
      }
      return list
    },
    //远程搜索
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    open(row) {
      let openThis = this;
      this.dialogVisible = true;
      // openThis.memberInfoForm.title = openThis.memberInfoForm.title + row.whyxxfhync;
      console.log('打印row',row);
    },
    handleClose(done) {
      this.memberInfoForm.title ='会员详情-';
      done();
      this.$emit('handleRefresh');
    },
    handleCancel(){
      switch (this.placeOrderForm.type){
        case "选择气瓶类型":
          this.placeOrderForm.type = '代客下单';
          this.placeOrderForm.title ='代客下单';
          this.dialogWidth = '1200px';
          break;
        case '代客下单':
          this.dialogVisible = false;
          break;
      }
    },
    handleSubmit() {
      switch (this.placeOrderForm.type){
        case "选择气瓶类型":
          this.placeOrderForm.type = '代客下单';
          this.placeOrderForm.title ='代客下单';
          this.dialogWidth = '1200px';
          break;
        case '代客下单':
          this.dialogVisible = false;
          this.memberInfoForm.title ='会员详情-';
          this.$emit('handleRefresh');
          break;
      }

    }
  }
}
</script>
<style lang="scss" scoped>
.changeTypeSty{
  ::v-deep.el-dialog__body .el-form, html body .el-message-box__body .el-form{
    padding-right: 0px!important;
    height: 100%;
  }
}
.memberInfoDialogSty{

  ::v-deep.el-dialog__body{
    border-top: 1px solid transparent !important;
    padding: 0px 20px;
    height: 590px;
  }
  ::v-deep.el-dialog__footer{
    border-top: 1px solid transparent !important;
  }
  .selectTypeSty{
    height: 100%;
    overflow-y: auto;
    .selectTypeMain{
      display: flex;
      width: 100%;
      .right{
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 50px);
        margin-left: 15px;
        .top{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .bottom{
          width: 100%;
          display: flex;
          align-items: center;
        }
      }
    }
    ::v-deep.el-checkbox__label{
      display: none!important;
    }
  }
}
</style>