<template>
  <el-dialog
    title="选择地址"
    :visible.sync="visible"
    append-to-body
    @close="close"
    @open="open"
    v-dialogDrag
    :close-on-click-modal="false"
    custom-class="common-dialog over-dialog table-dig" width="1100px">
      <div class="item-search">
        <div class="input-div">
           <el-select v-model="queryParam.orgId"
            :disabled = "orgSelectDisable"
             placeholder="请选择组织" size="mini"
             filterable  clearable >
             <el-option
               v-for="(item, i) in erpOrgList"
               :key="i"
               :label="item.organizationName"
               :value="item.orgId">
             </el-option>
           </el-select>
          <el-input v-model="queryParam.address1"
           v-inputFilter:trim
           @keyup.enter.native="doQuery(1)"
           size="mini"
           placeholder="请输入地址1" />
           <el-input v-model="queryParam.shortAddress"
            v-inputFilter:trim
            @keyup.enter.native="doQuery(1)"
            size="mini"
            placeholder="请输入地址简称" />
        </div>
        <div class="btns">
          <el-button type="warning" @click="doQuery(1)" size="mini">查询</el-button>
          <el-button type="warning" @click="handleSure" size="mini">确认</el-button>
        </div>
      </div>
      <el-table :data="tableData"
        ref="tableRef"
        class="single-select-table"
        border  height="100%"
        @cell-dblclick="cellDblclick"
        highlight-current-row size="mini" stripe >

        <el-table-column label="序号" width="50" type="index">
        </el-table-column>
        <el-table-column label="选择" width="50" >
          <template slot-scope="scope">
            <el-radio v-model="rowVal" :label="scope.row">&nbsp;</el-radio>
          </template>
        </el-table-column>

        <el-table-column
          v-for="(item,index) in columns"
          :key="index"
          :prop="item.prop"
          :formatter="formatter"
          :min-width="item.width"
          :label="item.label"
          :fixed="item.fixed"
          :show-overflow-tooltip="item.tooltip"
         >
        </el-table-column>
      </el-table>
      <ls-pagination
        :curr-page.sync="pager.currPage"
        :page-size.sync="pager.pageSize"
        :total="pager.total"
        :page-options="pager.pageOptions"
        @query="doQuery" >
      </ls-pagination>

  </el-dialog>
</template>

<script>
  import commonSelect from '@/common/commonSelectList.js'
  export default {
    name: 'dig-address-list',
    created(){
      // this.doQuery();
      this.initListData();
    },
    updated(){
      // if(this.$refs.tableRef){
        // this.$refs.tableRef.doLayout();
      // }
    },
    methods: {
      open(){
        this.doQuery();
      },
      async initListData(){
        this.erpOrgList = await commonSelect.getOrgDataGet(this);
      },
      doQuery (current) {
        if ( typeof current != 'undefined') {
          this.pager.currPage = current;
        }
        let param = {
          currPage: this.pager.currPage,
          pageSize: this.pager.pageSize,
          customerId: this.customerId,
          // status: this.status,
          entrance: this.entrance,
          // approveStatus:this.approveStatus
        };
        param = Object.assign(param, this.queryParam);

        this.$ajax.post({
            domain: 'crmCmUrl',
            url: 'cmAddress.findCmAddressPage',
            data: param,
            requestType: 'body',
            showLoad: true,
            success: function (res) {
                if (res.errorCode === 200) {
                  this.tableData = res.data.records || [];
                  this.pager.total = res.data.total;
                }
            }.bind(this),
            error: function (res) {
               this.$message.error(res.body.msg || res.msg);
            }.bind(this)
        })
      },
      //默认
      cellDblclick(row, column, cell, event){
        this.$emit('selectRow', row, this.flag, this.index);
        this.visible = false;
      },
      handleSure(){
        if(!this.rowVal){
          this.$message('请先选中行数据');
          return;
        }
        this.$emit('selectRow', this.rowVal, this.flag, this.index);
        this.visible = false;
      },
      formatter(row, column, cellValue, index){
         if(column.property == 'isDefault'){
            return row.isDefault == 1 ? '是' : '否';
         } else if(column.property == 'edi'){
           return row.edi == 1 ? '是' : '否';
         } else if(column.property == 'cmOrg'){
           return row.cmOrg.orgName;
         }
         else {
           return cellValue;
         }
      },
      close(){
        for(let item in this.queryParam){
          this.queryParam[item] = '';
        }
        this.$refs.tableRef.clearSelection();
        this.visible = false;
      },

    },
    props: {
      customerId: {
        type: String,
        default: '',
        required: true
      },
      entrance: { //关联条件
        type: String,
        default: ''
      },
      ismult: {
        type: Boolean,
        default: false
      },
      status: {
        type: String,
        default: 'Y'
      },
      approveStatus:{
        type:String,
        required:false
      }
    },
    data () {
      return {
          orgSelectDisable:false,
          visible: false,
          flag: '', //标识
          index: '', //外面需要的索引
          rowVal: '',
          queryParam: {
            address1: '',
            orgId: '',
            shortAddress: '',
          },
         // 格字段
          columns: [
             {label: '大区', prop: 'continentName', width: 100, fixed: false, tooltip: true},
             {label: '国家地区', prop: 'countryName', width: 100, fixed: false, tooltip: true},
             {label: '是否EDI', prop: 'edi', width: 100, fixed: false, tooltip: true},
             {label: '省(州)', prop: 'porridge', width: 100, fixed: false, tooltip: true},
             {label: '城市', prop: 'city', width: 100, fixed: false, tooltip: true},
             {label: '邮编', prop: 'postalCode', width: 100, fixed: false, tooltip: true},
             {label: '地址1', prop: 'address1', width: 100, fixed: false, tooltip: true},
             {label: '地址2', prop: 'address2', width: 100, fixed: false, tooltip: true},
             {label: '地址简称', prop: 'shortAddress', width: 100, fixed: false, tooltip: true},
             {label: '组织', prop: 'cmOrg', width: 100, fixed: false, tooltip: true},
             {label: '是否默认', prop: 'isDefault', width: 100, fixed: false, tooltip: true},
          ],
          tableData: [],
          erpOrgList: [],
          pager: {
            currPage: 1,
            pageSize: 10,
            pageOptions: [10, 20, 30, 50],
            total: 0
          },
      }
    },

}
</script>

<style type="text/css" scoped  lang="scss">
  .el-dialog.table-dig {
    .item-search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .input-div{
        flex: 1;
        display: flex;
        .el-input, .el-select{
          margin-right: 10px;
        }
      }
      .btns{
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }

  }

</style>
