<template>
  <div>
    <p-button @click="addRow">新加行</p-button>
    <p-button @click="reset">重置</p-button>
    <p-button @click="visible">验证</p-button>
    <p-table-edit-pro
      ref="table"
      editor-row-table
      :columns="columns"
      :dataSource.sync="tableData"
      :bordered="true"
      @colChange="colChange"
      :selectedRowKeys.sync="selectedRowKeys"
      @delRow="delRow"
    />
    <p-button @click="getData">获取数据</p-button>

    <p-table-edit-pro
      ref="table3"
      editor-row-table
      :columns="columns2"
      :remoteUrl="'/api/service-platform-power/microService/getMicroservices'"
      :dataSource.sync="tableData3"
      :bordered="true"
      @colChange="colChange"
      :selectedRowKeys.sync="selectedRowKeys3"
    />
    <p-table
      style="background-color: #fff"
      ref="table2"
      :columns="columns2"
      :bordered="true"
      dragle
      :pagination="8"
      :dataSource.sync="tableData2"
      :remoteUrl="'/api/service-platform-power/microService/getMicroservices'"
      @colChange="colChange"
      :selectedRowKeys.sync="selectedRowKeys2"
    >
      <template slot="title">
        <div class="CM-top-btnLis">
          <div>证件资料</div>
        </div>
      </template>
    </p-table>
  </div>
  <!-- <div slot="expandedRowRender" slot-scope="record" style="margin: 0; background: #f5f9fa">
        <ul class="fmain">
          <li v-for="(item, key) in record" :key="key">
            <div class="fcontent">
              <div class="flabel">{{ key + ':' + item }}</div>
            </div>
          </li>
        </ul>
      </div> -->
</template>
<script>
function startDisabledTime(startValue, name, value, index, currentRow) {
  let endValue = currentRow.endTime
  if (!startValue || !endValue) {
    return false
  }
  return startValue.valueOf() > new Date(endValue).valueOf()
}
function endDisabledTime(endValue, name, value, index, currentRow) {
  let startValue = currentRow.startTime
  if (!startValue || !endValue) {
    return false
  }
  return new Date(startValue).valueOf() >= endValue.valueOf()
}

export default {
  data() {
    this.columns = [
      { hidden: true, dataIndex: 'id' },
      {
        type: 'edit',
        dataIndex: 'certificateNumber',
        title: '证件号码',
        width: 200,
        required: true
      },
      {
        type: 'switch',
        dataIndex: 'ta',
        title: 'switch2'
      },
      {
        title: '证件名称',
        type: 'searchModal',
        dataIndex: 'certificateName',
        width: 200,
        targetClick: true,
        targetValueKey: 'certificateName',
        remoteUrl: { url: '/api/oms-std-maindata/pubCertificate/pubCertificatePopupQuery/v1.0', method: 'post' },
        toolBar: {
          rowKey: 'id',
          items: [
            {
              type: 'input',
              name: 'certificateCode',
              label: '证件编码',
              value: ''
            },
            {
              type: 'input',
              name: 'certificateName',
              label: '证件名称',
              value: ''
            }
          ]
        },
        tableConfig: {
          rowKey: 'id',
          columns: [
            {
              dataIndex: 'id',
              title: 'ID',
              hidden: true
            },
            {
              dataIndex: 'certificateNumber',
              title: '证件号码'
            },

            {
              dataIndex: 'certificateName',
              title: '证件名称'
            },
            {
              dataIndex: 'certificateCode',
              title: '证件编码'
            }
          ]
        }
      },
      {
        dataIndex: 'certificateCode',
        title: '证件编码',
        width: 200,
        disabled: true
      },
      {
        type: 'select',
        dataIndex: 'stote',
        title: '证件状态',
        value: '1',
        width: 200,
        remoteUrl: {
          url: '/api/oms-std-maindata/refdata/dtl/dd-list',
          method: 'post',
          headers: { 'content-type': 'application/json' },
          data: JSON.stringify([
            {
              objectcode: 'PUB_CERTIFICATE_STATUS'
            }
          ])
        },
        doneBefore(data) {
          if (data && data.success) {
            var da = data.data.PUB_CERTIFICATE_STATUS
            var arr = da.map(x => {
              return {
                label: x.text,
                value: x.value
              }
            })
            data.data = arr
          }
          return data
        }
      },
      {
        dataIndex: 'ppt',
        title: '是否有效',
        type: 'select',
        align: 'center',
        validateType: 'number',
        options: [
          { value: 1, label: '有效' },
          { value: 0, label: '过期' }
        ]
      },
      {
        dataIndex: 'startTime',
        title: '开始时间',
        type: 'date',
        disabledDate: startDisabledTime
      },
      {
        dataIndex: 'endTime',
        title: '结束时间',
        type: 'date',
        disabledDate: endDisabledTime
      },
      {
        type: 'delRow',
        flex: 'right'
      }
    ]

    this.columns2 = [
      {
        title: 'ID',
        dataIndex: 'id',
        hidden: true
      },
      {
        type: 'autoComplete',
        title: '服务名称',
        //dataSource:["服务名称","服务名称2"],
        dataSource: ({name, index, record }) => {
          if (record.serviceCode) {
            return [record.serviceCode+index]
          } else {
            return []
          }
        },
        dataIndex: 'serviceName',
        ellipsis: true,
        width: 250
      },
      {
        title: '服务编码',
        dataIndex: 'serviceCode',
        ellipsis: true,
        width: 160
      },
      {
        title: '类别',
        dataIndex: 'category',
        ellipsis: true,
        width: 120
      },

      {
        title: '服务说明',
        // fixed: 'right',
        dataIndex: 'description'
      }
    ]
    return {
      selectedRowKeys: [],
      selectedRowKeys2: [],
      selectedRowKeys3: [],
      formData: null,
      tableData: [
        {
          id: 0,
          certificateNumber: '',
          ta: 1,
          certificateName: '',
          certificateCode: '',
          startTime: '',
          endTime: '',
          ppt: ''
        }
      ],
      tableData2: [],
      tableData3: []
    }
  },
  watch: {
    // tableData(value) {
    //   console.log(value)
    // },
  },
  methods: {
    colChange({ name, value, modalRowData, index, record, event }) {
      console.log(this.tableData)
      if (name == 'certificateName') {
        record.certificateNumber = modalRowData[0].certificateNumber
        record.certificateName = modalRowData[0].certificateName
        record.certificateCode = modalRowData[0].certificateCode
        console.log('value', value)
        console.log('证件号码,', record.certificateNumber)
        console.log('证件名称', record.certificateName)
        console.log('证件编码', record.certificateCode)
      }
    },
    addRow() {
      console.log(this.$refs.table)

      this.$refs.table.createRow(0, {
        certificateNumber: '2123',
        certificateName: 'name',
        certificateCode: 'name123',
        ppt: 1
      })
    },
    reset() {
      this.$refs.table.reset()
    },
    getData() {
      // this.$refs.table3.removeRows('6')

      console.log(this.tableData3)
      console.log(this.selectedRowKeys3)
    },
    delRow() {},
    visible() {
      this.$refs.table.validateFields(function(error, values, selectData) {
        if (error) return
        console.log(values)
      })
    },
    hanlderSubmit(evnet, form) {}
  }
}
</script>
