<template>
  <!--    确权文件盖章通知任务 页面  -->
  <el-tabs>
    <up-down-layout :handleFlag.sync="handleFlag">
      <search-form
        @clearParam="clearParam"
        @handleFilter="handleFilter()"
        searchPerms="search"
        resetPerms="reset"
        :formValue.sync="queryParas"
        v-model="queryParas"
        :componentList="componentList"
        slot="query">
      </search-form>
      <template slot="table">
        <el-form :show-message="false">
          <data-table :menuCode="menuId"  :cellStyle="cellStyle" :loadPage="loadPage" :border="true"  :stripe="true"
                      :menuFlag="true" :showSelection="true" :showPage="true"
                      :api="api" :handleFlag.sync="handleFlag" v-bind="elHeightObj"
                      :queryParas="queryParas" :sourceData.sync="sourceData"
                      :loadCount.sync="loadCount" :columns="columns" :operateBtnLayout="operateBtnLayout">
            <template slot="headButton" slot-scope>
              <el-row>
                <!--                                speechCraftInput-->
                <el-col :span="24">
                  <el-col :span="2">
                    <div class="text_left">
                      <span class="">{{$t('traceMgr.Total')}} 0</span></div>
                  </el-col>
                  <el-col :span="2">
                    <div class="text_left">
                      <span>{{$t('traceMgr.notGenerated')}} 0</span></div>
                  </el-col>
                  <el-col :span="2">
                    <div class="text_left">
                      <span>{{$t('traceMgr.notUploaded')}} 0</span></div>
                  </el-col>
                  <div class="textRight">
                    <btn-download  fileID="" type="primary" @click="load()" size="small" :downloadButtonMsg="$t('traceMgr.loadDownLoding')" :classType="true"></btn-download>
                    <btn-batch-upload :btnDisplay="true" :uploadApi="serviceAddress" @uploadFailed="uploadFailed" @uploadSuccess="batchUploadSuccess"></btn-batch-upload>
                  </div>
                </el-col>
              </el-row>
            </template>
            <template slot="district" slot-scope="scope">
              <i class="el-icon-zoom-in" @click="editStatus()" v-if="openStatus">&nbsp;</i>
              <i class="el-icon-remove-outline" @click="editStatus()" v-if="!openStatus">&nbsp;</i>
              <span>{{scope.data.row.district}}&nbsp;</span>

              <i  class="el-icon-warning"></i>
            </template>
          </data-table>
          <!--话术组件-->
          <el-row class="body_msg">
            <el-col :span="1" class="text-center">
              <span>{{$t('common.discourse')}}</span>
            </el-col>
            <el-col :span="10">
              <speech-craft-input :autosize="autosize" v-model="discourse" ></speech-craft-input>
            </el-col>
          </el-row>
          <!--                    el-icon-caret-top-->
        </el-form>
      </template>
    </up-down-layout>
  </el-tabs>
</template>
<script>
import {
  DataTable,
  searchForm,
  SelectProductName,
  upDownLayout,
  SelectAddress,
  authButton,
  btnImport,
  btnBatchUpload,
  btnDownload,
  btnUpload,
  SelectFlag,
  SelectCoreEnterprise,
  SelectPlanManager,
  SelectAreaCommissioner,
  SelectDictionary,
  SelectSmallArea,
  speechCraftInput } from 'newepoch-components'
import { UPLOAD_API, BATCH_UPLOAD_API } from '@/constant.js'
import tracemgrApi from '@/api/tracemgrApi'
import taskDialog from '@/api/tracemgr/confirmRightSealNotice/taskDialog'
import mixin from '@/pages/mixin'
import BasePage from '@/pages/basePage'
import * as format from '@/filters/index'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    format,
    speechCraftInput,
    BasePage,
    searchForm,
    taskDialog,
    SelectProductName,
    upDownLayout,
    SelectAddress,
    authButton,
    btnImport,
    btnBatchUpload,
    btnDownload,
    btnUpload,
    SelectFlag,
    SelectDictionary,
    SelectPlanManager,
    SelectAreaCommissioner,
    SelectCoreEnterprise,
    DataTable
  },
  props: {
    confirmRightSealNoticeData: {
      type: Array,
      default () {
        return this.sourceData
      }
    },
    visible: {
      type: Boolean
    },
    url: {
      type: String
    },
    needComplete: {
      type: Boolean
    },
    form: {
      // type: [Object],
      // required: true
    }
  },
  mounted () {
    this.handleFilter()
  },
  data () {
    return {
      discourse: '',
      autosize: {
        minRows: 7,
        maxRows: 9
      },
      apeechInput: '',
      batchUploadApi: BATCH_UPLOAD_API,
      uploadApi: UPLOAD_API,
      serviceAddress: UPLOAD_API,
      loadPage: 'getList',
      handleFlag: true,
      loadCount: 0,
      openStatus: true,
      fileId: '2002281715317860001',
      dataTable: [],
      queryParas: {
        pageIndex: 1,
        pageSize: 10
      },
      componentList: [
        // 产品名称
        {
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.productName,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.selectInfo,
          value: 'productName',
          name: 'product',
          componentName: SelectProductName,
          labelWidth: '120px'
        },
        // 核心企业
        {
          value: 'coreEnterprise',
          componentName: SelectCoreEnterprise,
          label: this.$i18n.messages[this.$i18n.locale].common.coreEnterprise,
          prop: 'coreCompanyId',
          labelWidth: '120px'
        },
        // 计划管理人
        {
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.financials,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.selectInfo,
          value: 'planningManagerName',
          componentName: SelectPlanManager,
          labelWidth: '120px'
        },
        // 期数
        {
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.periodsCascade,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.input,
          value: 'periods',
          componentName: 'el-input',
          labelWidth: '120px'
        },
        // 区域
        {
          label: this.$i18n.messages[this.$i18n.locale].common.district,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.selectInfo,
          value: 'district',
          componentName: SelectSmallArea,
          labelWidth: '120px'
        },
        // 区域编号
        {
          value: 'sectionNumber',
          componentName: 'el-input',
          name: 'SectionNumber',
          label: this.$i18n.messages[this.$i18n.locale].common.sectionNumber,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.input + this.$i18n.messages[this.$i18n.locale].common.sectionNumber,
          prop: 'SectionNumber',
          labelWidth: '120px'
        },
        // 项目公司名称
        {
          value: 'nameOfProjectCompany',
          disabled: false,
          componentName: 'el-input',
          name: 'NameOfProjectCompany',
          label: this.$i18n.messages[this.$i18n.locale].common.nameOfProjectCompany,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.input + this.$i18n.messages[this.$i18n.locale].common.nameOfProjectCompany,
          prop: 'NameOfProjectCompany',
          labelWidth: '120px'
        },
        // 供应商名称
        {
          value: 'supplierName',
          disabled: false,
          componentName: 'el-input',
          name: 'supplierName',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.supplierName,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.input + this.$i18n.messages[this.$i18n.locale].traceMgr.supplierName,
          prop: 'supplierName',
          labelWidth: '120px'
        },
        // 付款确认书编号
        {
          value: 'paymentConfirmationNo',
          disabled: false,
          componentName: 'el-input',
          name: 'PaymentConfirmationNo',
          label: this.$i18n.messages[this.$i18n.locale].common.paymentConfirmationNo,
          prop: 'PaymentConfirmationNo',
          labelWidth: '120px',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.input + this.$i18n.messages[this.$i18n.locale].common.paymentConfirmationNo
        },
        // 区域专员
        {
          label: this.$i18n.messages[this.$i18n.locale].common.theRegionalCommissioner,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.selectInfo,
          value: 'theRegionalCommissioner',
          componentName: SelectAreaCommissioner,
          labelWidth: '120px',
          multiple: true
        }
      ],
      operateBtnLayout: '',
      selectedRows: [],
      sourceData: [],
      columns: [
        //  区域
        {
          prop: 'district',
          align: 'center',
          width: '150px',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.district,
          slot: true
        },
        //  项目公司名称
        {
          prop: 'nameOfProjectCompany',
          align: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].common.nameOfProjectCompany
        },
        //  付款确认书编号
        {
          prop: 'paymentConfirmationNo',
          align: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].common.paymentConfirmationNo
        },
        //  区域编号
        {
          prop: 'sectionNumber',
          align: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].common.sectionNumber
        },
        //  供应商名称
        {
          prop: 'supplierName',
          align: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.supplierName
        },
        //  笔数
        {
          prop: 'num',
          align: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.num
        },
        //  已生成
        {
          prop: 'generated',
          align: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.generated
        },
        //  未上传
        {
          prop: 'notUploaded',
          align: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.notUploaded
        },
        //  应收账款金额
        {
          prop: 'amountOfReceivables',
          align: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.amountOfReceivables,
          format: (row) => {
            if (row.amountOfReceivables === undefined || row.amountOfReceivables === '') {
              return ''
            }
            return format.thousandFilter(row.amountOfReceivables) + '元'
          }
        },
        //  状态
        {
          prop: 'status',
          align: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.status
        },
        //  预计解决时间
        {
          prop: 'possibleResolutionTime',
          align: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.possibleResolutionTime
        }
      ],
      currentProcessParas: {},
      currentComponentName: null
    }
  },
  computed: {
    api () {
      return tracemgrApi['confirmRightTaskApi']
    }
  },
  watch: {
    visible: {
      handler: function (newValue) {
        if (newValue) {
          this.$nextTick(function () {
            this.handleFilter()
          })
        }
      }
    }
  },
  sourceData: {
    handler (newValue, oldValue) {
      if (newValue) {
        this.$emit('getConfirmRightSealNoticeData', [10])
      }
    }
  },
  methods: {
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10
      }
    },
    closeDialog () {
      this.dialogVisible = false
    },
    handleFilter: function () {
      this.loadCount = this.loadCount + 1
    },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      return ''
    },
    edit: function () {
    },
    batchDownload: function () {
    },
    loadDownLoding: function () {
    },
    batchUploadSuccess (returnData) {
      console.log(returnData.fileList)
      this.success(this.$i18n.messages[this.$i18n.locale].traceMgr.package + returnData.fileName + this.$i18n.messages[this.$i18n.locale].traceMgr.uploadMessage11)
    },
    uploadFailed: function (a, b, c) {
      this.error(this.$i18n.messages[this.$i18n.locale].traceMgr.fileEorro)
    },
    editStatus: function () {
      if (this.openStatus === true) {
        this.dataTable = []
        this.sourceData.forEach(item => {
          this.dataTable.push(item)
        })
        let arr = this.sourceData[0]
        let createRow = {
          'PaymentConfirmationNo': '123',
          'SectionNumber': '456',
          'supplierName': '789',
          'num': '10'
        }
        this.sourceData.unshift(createRow)
        this.sourceData.unshift(createRow)
        this.sourceData.unshift(createRow)
        this.sourceData.unshift(arr)
        this.sourceData[this.sourceData.length - 1] = ''
        this.openStatus = false
      } else {
        this.sourceData = []
        this.sourceData = this.dataTable
        this.openStatus = true
      }
    }
  }
}
</script>
<style scoped lang="scss">
  @import '~@/styles/tracemgr/factoringCommissioner/taskTable/supplemenMaintain/taskDialog.scss';
</style>
