<template>
    <!--确认分配页面-->
    <dialog-edit :visible.sync="dialogVisible"
                 :title="$t('traceMgr.confirmDistribution')"
                 :editModel="editModel"
                 :orderType="orderType"
                 :appendToBody="true" :autoClose="true" @close="dialogClose"
                 :footerBtnShow="false">

        <el-row class="margin-top">
            <el-col>{{$t('traceMgr.newSupplierInfo')}}</el-col>
            <el-col>
                <data-table :columns="columns1" :api="tableApi" :sourceData.sync="sourceData1" v-loading="loading2" :vLoading="false"
                            :element-loading-text="$t('traceMgr.loading')"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(255, 255, 255, 1)"
                            operateBtnLayout="" :queryParas="previewQueryParas" :menuFlag="false" :loadList="loadPage"    :showPage="false"
                            :border="true"  :stripe="true">
                    <template slot="selectList" slot-scope="scope">
                        <div v-if="scope.data.row.selectList.length === 1">
                            <el-select disabled="disabled" class="form-item-class"  v-model="scope.data.row.selectList[0].factoringUserId">
                                <el-option
                                        v-for="item in scope.data.row.selectList"
                                        :key="item.factoringUserId"
                                        :label="item.factoringUserName"
                                        :value="item.factoringUserId">
                                </el-option>
                            </el-select>
                        </div>
                        <div v-if="scope.data.row.selectList.length > 1">
                            <el-select  class="form-item-class"   v-model="scope.data.row.changeId"
                                       >
                                <el-option
                                        v-for="item in scope.data.row.selectList"
                                        :key="item.factoringUserId"
                                        :label="item.factoringUserName"
                                        :value="item.factoringUserId">
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </data-table>
            </el-col>
            <el-col>{{$t('traceMgr.oldSupplierInfo')}}</el-col>
            <el-col>
                <data-table :columns="columns2" :api="tableApi" :sourceData.sync="sourceData2"
                            operateBtnLayout="" :queryParas="previewQueryParas" :menuFlag="false" :loadList="loadPage"   :showPage="false" v-loading="loading2"
                            :element-loading-text="$t('traceMgr.loading')"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(255, 255, 255, 1)"
                            :border="true"  :stripe="true">
                    <!--            级别列的input输入框-->
                    <template slot="selectList" slot-scope="scope">
                        <div v-if="scope.data.row.selectList.length === 1">
                            <el-select disabled="disabled" class="form-item-class"  v-model="scope.data.row.selectList[0].factoringUserId">
                                <el-option
                                        v-for="item in scope.data.row.selectList"
                                        :key="item.factoringUserId"
                                        :label="item.factoringUserName"
                                        :value="item.factoringUserId">
                                </el-option>
                            </el-select>
                        </div>
                        <div v-if="scope.data.row.selectList.length > 1">
                            <el-select  class="form-item-class"  v-model="scope.data.row.changeId"
                                       >
                                <el-option
                                        v-for="item in scope.data.row.selectList"
                                        :key="item.factoringUserId"
                                        :label="item.factoringUserName"
                                        :value="item.factoringUserId">
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </data-table>
            </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
             <el-button type="primary" :loading="showLoading" size="medium" @click="confirm()">{{$t('common.confirm')}}</el-button>
             <el-button size="medium" @click="dialogVisible=false">{{$t('common.close')}}</el-button>
        </div>
    </dialog-edit>
</template>
<script>
import BaseEditPage from '@/pages/baseEditPage'
import { DialogEdit, DataTable } from 'newepoch-components'
import tracemgrApi from '@/api/tracemgrApi'
import * as format from '@/filters/index'

export default {
  name: 'confirmDistributionOrderDialog',
  extends: new BaseEditPage(''),
  props: {
    editModel: {
      type: String
    },
    orderType: {
      type: String
    },
    queryParas: {
      type: Object
    },
    confirmData: {
      type: Array
    },
    handler: {
      type: Function
    },
    form: {
      type: Object
    }
  },
  components: {
    DialogEdit,
    DataTable,
    tracemgrApi
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    }
  },
  data: function () {
    return {
      elementLoadingText: {
        type: String,
        default: function () {
          return this.$i18n.messages[this.$i18n.locale].traceMgr.loading
        }
      },
      loadCount: 0,
      loadPage: 'getDataConfirmCreditorInfo',
      type: '',
      mode: '2',
      // sourceData: [{
      //   newCreditor: [],
      //   oldCreditor: []
      // }],
      showLoading: false,
      loading2: false,
      vLoading: true,
      sourceData1: [],
      sourceData2: [],
      commitData: [],
      tableApi: {},
      previewQueryParas: {},
      columns1: [
        {
          prop: 'creditor',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.supplierName,
          width: '100px'
        },
        // 本次订单分配保理专员
        {
          prop: 'factoringUserName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.factoringSpecialist
          // width: '200px'
        },
        // 供应商分配表保理专员
        {
          prop: 'selectList',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.vendorDistributionFactoring,
          width: '140px',
          slot: true
        }
      ],
      columns2: [
        // 供应商名称
        {
          prop: 'creditor',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.supplierName
          // width: '200px'
        },
        // 保理专员
        {
          prop: 'factoringUserName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.factoringCommissioner
          // width: '200px'
        },
        // 维护时间
        {
          prop: 'modifyTime',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.maintenanceTime,
          format: (row) => { return format.formatDatetime(row.modifyTime, 'yyyy-MM-dd hh:mm:ss') }
          // width: '200px'
        },
        // 本次订单分配保理专员
        {
          prop: 'currentFactoringUserName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.factoringSpecialist
          // width: '200px'
        },
        // 供应商分配表保理专员
        {
          prop: 'selectList',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.vendorDistributionFactoring,
          width: '140px',
          slot: true
        }
      ]
    }
  },
  watch: {
    dialogVisible (value, oldVal) {
      if (value) {
        let arr = []
        this.confirmData.forEach((item, index) => {
          let val = {
            productId: this.confirmData[index].productId,
            productName: this.confirmData[index].productName,
            creditorId: this.confirmData[index].creditorId + '',
            creditor: this.confirmData[index].creditor + '',
            factoringUserId: this.confirmData[index].factoringUserId,
            factoringUserName: this.confirmData[index].factoringUserName,
            productType: this.confirmData[index].productType,
            assetCode: this.confirmData[index].assetCode
          }
          arr.push(val)
        })
        this.loading2 = true
        // this.openFullScreen()
        let sendData = { confirmList: arr, orderType: this.orderType }
        this.previewQueryParas = Object.assign({}, sendData)
        tracemgrApi['confirmDistributionOrderDialog'].getDataConfirmCreditorInfo(sendData).then(res => {
          console.log(res.data)
          if (res.data.length > 0) {
            this.sourceData1 = res.data[0].newCreditor
            this.sourceData2 = res.data[0].oldCreditor
            this.loading2 = false
            // this.vLoading = false
          } else {
            this.loading2 = false
            // this.vLoading = false
          }
        })
      }
    },
    previewQueryParas (o, n) {
      if (o !== n) {
        this.handleFilter()
      }
    }
  },
  methods: {
    openFullScreen () {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 3000)
    },
    handleFilter: function () {
      this.loadCount = this.loadCount + 1
    },
    confirm  () {
      if (this.confirmData.length === 0 || this.confirmData.length === 0) {
        this.error(this.$i18n.messages[this.$i18n.locale].traceMgr.nullData)
      }
      let commit = Object.assign([], this.sourceData2.concat(this.sourceData1))

      // 排除没有下拉选择的，不能选的
      let filterData = []
      let confirm = true
      commit.forEach(item => {
        console.log(item.selectList.length)
        if (item.changeId === undefined && item.selectList.length > 1) {
          confirm = false
          return this.error(this.$i18n.messages[this.$i18n.locale].traceMgr.pleaseMakeSureSelect)
        }
        if (item.changeId !== undefined) {
          // 名称
          item.changeName = item.selectList.filter(o => {
            return o.factoringUserId === item.changeId
          })[0].factoringUserName
          // id
          item.changeId = item.selectList.filter(o => {
            return o.factoringUserId === item.changeId
          })[0].factoringUserId
          filterData.push(item)
        } else {
          item.changeName = item.selectList[0].factoringUserName
          item.changeId = item.selectList[0].factoringUserId
          filterData.push(item)
        }
      })
      // if (filterData.length === 0) {
      //   this.error('请确认已做出修改，再确认提交！')
      //   return
      // }
      if (confirm) {
        this.$confirm(this.$i18n.messages[this.$i18n.locale].traceMgr.makeSure, this.$i18n.messages[this.$i18n.locale].common.tip, {
          confirmButtonText: this.$i18n.messages[this.$i18n.locale].common.yes,
          cancelButtonText: this.$i18n.messages[this.$i18n.locale].common.no,
          type: 'warning'
        }).then(() => {
          this.showLoading = true
          let data = { list: filterData, orderType: this.orderType, mode: this.mode }
          tracemgrApi['distributionOrderDialog'].temporarySave(data).then(res => {
            if (res.data) {
            // this.success('保存成功')
              this.$message({
                type: 'success',
                message: this.$i18n.messages[this.$i18n.locale].common.saveSuccess
              })
              this.handler()
              this.dialogVisible = false
              this.showLoading = false
            } else {
              this.showLoading = false
              this.error(this.$i18n.messages[this.$i18n.locale].traceMgr.saveFailedMakeSure)
            }
          }).catch(res => {
            this.showLoading = false
            // this.error('保存失败，请确认数据')
          })
        }).catch(() => {
          this.handler()
          this.dialogVisible = false
          this.showLoading = false
          this.$message({
            type: 'info',
            message: this.$i18n.messages[this.$i18n.locale].traceMgr.canceled
          })
        })
      }
    },
    dialogClose: function () {
      this.loading2 = false
      // this.vLoading = false
      if (this.autoClose) {
        this.$emit('close')
      } else {
        this.dialogVisible = false
      }
    }
  }
}
</script>
<style scoped lang="scss">
    @import '~@/styles/tracemgr/coordinate/workbench/distributionOrderDialog.scss';
</style>
