<template>
  <div id="contrast-Wrap">
    <div class="switchBar">
      <span>隐藏相同项</span>
      <!-- default-checked -->
      <a-switch @change="TableOnChange" />
    </div>
    <div class="main">
      <a-table
        :pagination="{
          total:total,
          'show-less-items':true,
          'show-quick-jumper':true,
          'onChange':onPageChange,
          'hideOnSinglePage':true
        }"
        :rowKey="(record,index)=>{return index}"
        :columns="columns"
        :data-source="dataSoure"
        bordered>
      </a-table>
      <div class="radioBar">
        <a-radio-group @change="onChange" v-model="processStatus">
          <a-radio :value="3">
            审批通过
          </a-radio>
          <a-radio :value="4">
            审批驳回
          </a-radio>
        </a-radio-group>
      </div>

      <div class="textareaBar">
        <span>审批意见：</span>
        <a-input type="textarea" placeholder="" v-model="approveDesc"/>
      </div>
      <div class="btn-list">
        <a-button type="stop" @click="handleOk(1)">
          取消
        </a-button>
        <a-button type="add" style="margin-right: 20px;" @click="onSubmit(0)">
          提交
        </a-button>

      </div>
    </div>

  </div>
</template>
<script>
import { getDataContrast, getApproveData } from '@/api/auditMasterData/approve'
const columns = [
  {
    title: '属性',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    align: 'center'
  },
  {
    title: '变更前',
    dataIndex: 'before',
    align: 'center'
  },
  {
    title: '变更后',
    dataIndex: 'after',
    align: 'center'
  }
]

export default {
  props: {
    params: {
      type: Object,
      required: true
    },
    selectedRows: {
      type: Array,
      required: true
    },
    dataContrastColumns: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      total: 0,
      dataSoure: [],
      columns,
      processStatus: '',
      approveDesc: ''
    }
  },
  mounted() {
   this.getDataContrast()
   this.dataSourceFun()
  },

  methods: {
    dataSourceFun() {
      this.selectedRows.forEach((item, index) => {
        this.processStatus = item.processStatus
        this.approveDesc = item.approveDesc
      })
      // console.log('==============', this.processStatus)
    },
    TableOnChange(checked) {
      if (checked) {
        const dataSoure = this.dataSoure
        const siftDataSoure = []
        dataSoure.forEach((item) => {
          if (item.before !== item.after) {
            siftDataSoure.push(item)
          }
        })
        this.dataSoure = siftDataSoure
      } else {
        this.dataSoure = []
        this.getDataContrast()
      }
    },
    getDataContrast() {
      getDataContrast(this.params).then((res) => {
        if (res.code === 200) {
          const resData = res.data
          const afterData = JSON.parse(resData.after)
          const beforeData = resData.before
          this.dataContrastColumns.forEach((item) => {
            Object.getOwnPropertyNames(afterData).forEach((k, i) => {
              if (item.key === k) {
                var obj = {}
                obj.after = afterData[k]
                obj.before = beforeData[k]
                this.dataSoure.push(Object.assign(item, obj))
              }
            })
          })

          // console.log('数据对比:', this.dataSoure)
        }
      })
    },
    onChange(e) {
      if (e.target.value === 3) {
        this.approveDesc = '通过'
      } else {
           this.approveDesc = '驳回'
      }
    },
    onSubmit() {
      var that = this
      // console.log('审批单条selectedRows:', this.selectedRows)
      var approveDatas = this.selectedRows[0]

      approveDatas.modelId = this.params.modelId
      approveDatas.approveDesc = this.approveDesc
      approveDatas.processStatus = this.processStatus

      this.$confirm({
        title: '确认审批数据?',
        onOk() {
          console.log('approveDatas:', approveDatas)
          return getApproveData(approveDatas).then((res) => {
            if (res.code === 200) {
              console.log('res.msg: ', res.msg)
              that.handleOk()
            }
          })
        },
        onCancel() {}
      })
    },
    handleOk(i) {
      this.$emit('handleOk', i)
    },
    onPageChange(e) {
      console.log(`e`, e)
    }
  }
}
</script>
<style lang='less' scope>
#contrast-Wrap {
  .switchBar {
    display: flex;
    align-items: center;
    margin: 0 0 20px;
    & > span {
      font-size: 16px;
      color: #000;
      font-weight: bold;
      padding-right: 20px;
    }
  }
  .main {
    .radioBar {
      margin: 30px 0 20px;
    }
    .textareaBar {
      margin-bottom: 20px;
      display: flex;
      align-items: top;
      margin: 20px 0;
      & > span{
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        text-align: left;
      }
      & > textarea{
        width: 500px;
      }
    }
    .btn-list {
      text-align: center;
      .submitBtn,
      .closeBtn {
        margin: 0 20px;
      }
    }
  }
}
</style>
