<!--任务分配页面-->
<template>
  <div>
    <dialog-edit
      :visible.sync="dialogVisible"
      :autoSave="false"
      :autoClose="true"
      :editModel="editModel"
      :form="queryParas"
      :saveFlag="false"
      @close="close"
      :title="$t('coordManageMain.taskAssign')">
      <el-form ref="form" :rules="rules" :model="queryParas">
        <dym-form :componentList="componentList1" :formValue.sync="queryParas"></dym-form>
        <el-row :gutter="10">
          <el-col :xs="8" :sm="8" :md="8">
            <el-form-item :label="$t('factoringBusinessInfoQuery.payCode')" labelWidth="130px">
              <el-input v-model="queryParas.assetCode" maxlength="50" :placeholder="$t('common.pleaseInput')" class="dymForm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8">
            <el-form-item :label="$t('coordManageMain.tracer')" labelWidth="130px">
              <trace-user-select-list :queryParas="queryParas" v-model="queryParas.traceUserId" class="dymForm"></trace-user-select-list>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8">
            <el-form-item style="float:right" class="searchArea">
              <auth-button size="medium" :openPerms="false" type="primary" label="查询" icon="iconfont iconycchaxun" :style="'margin-right: -4px' " @click="handleFilter"></auth-button>
              <auth-button size="medium" :openPerms="false" label="重置" icon="iconfont iconyczhongzhi" :style="'margin-right: -4px'" @click="clearParam"></auth-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <search-form :componentList="componentList2" :formValue.sync="queryParas" @handleFilter="handleFilter" @clearParam="clearParas" ></search-form> -->
      </el-form>
      <data-table :sourceData.sync="sourceData"
                  :loadCount="loadCount"
                  :queryParas.sync="queryParas"
                  :columns="columns"
                  :showPage="false"
                  :showSelection="true"
                  max-height="300"
                  @selectRowChange="selectRowChange"
                  ref="dataTable">
                <template slot="headButton">
                    <div style="float:left;margin-top: 10px;">共反馈{{dataStatus.sumNum}}笔、已分配{{dataStatus.assignedNum}}笔、待分配{{dataStatus.toBeAssignedNum}}笔{{dataStatus.questionNum}}问题</div>
                    <div style="float:right">
                        <auth-button icon="iconfont iconfenpei" :label="$t('coordManageMain.preAssign')" type="primary" size="medium" @click="showPreAssign"></auth-button>
                        <auth-button icon="iconfont iconfenpei" :label="$t('coordManageMain.batchAssign')" type="primary" size="medium" @click="showBatchEditAssign('1')"></auth-button>
                        <auth-button icon="iconfont iconbiangeng" :label="$t('coordManageMain.batchChange')" type="primary" size="medium" @click="showBatchEditAssign('2')"></auth-button>
                    </div>
                </template>
                <template slot="feedbackQuestionContent" slot-scope="scope">
                  <span-plus :text="feedbackQuestionFormat(scope.data.row.feedbackQuestionContent)" :index="scope.data.$index"></span-plus>
                </template>
                <template slot="auditFileType" slot-scope="scope">
                  {{formatType(scope.data.row)}}
                </template>
                <el-table-column :label="$t('common.operate')" align="center" width="100px" fixed="right">
                    <template slot-scope="scope">
                        <auth-button icon="iconfont iconfenpei" :title="$t('coordManageMain.assign')" class="iconCircle margin-left"  @click="showEditAssign(scope.row)"></auth-button>
                    </template>
                </el-table-column>
                <template slot="paginationLeft">
                      <div style="float: right">
                        <el-pagination  @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page.sync="queryParas.pageIndex"
                                        :page-sizes="pageSizes"
                                        :page-size="queryParas.pageSize"
                                        :layout="pageLayout"
                                        prev-text="上一页"
                                        next-text="下一页"
                                        :page-count="pageCount"
                                        ref="dataTable"
                                        :total="currentTotal">
                          <span style="text-align: center">{{queryParas.pageIndex}}</span>
                        </el-pagination>
                      </div>
              </template>
            </data-table>
  </dialog-edit>
  <pre-assign-pop v-if="preAssignVisible" :editModel="newEditModel" :visible.sync="preAssignVisible" :form="projectInfo"></pre-assign-pop>
  <edit-assign-pop v-if="editAssignVisible"
                   :editModel="newEditModel"
                   :visible.sync="editAssignVisible"
                   :form="projectInfo"
                   :keyId="keyId"
                   :assignType="assignType"
                   :assignStatus='assignStatus'
                   :assignKeyId="assignKeyId"
                   @chooseBtnClick="chooseBtnClick"></edit-assign-pop>
  </div>
</template>
<script>
import { DialogEdit, searchForm, DataTable, authButton, SelectDictionary, dymForm, SpanPlus, BaseSelect } from 'newepoch-components'
import BasePage from '@/pages/baseEditPage'
import fileSelectList from '@/components/element/assetoutfeedback/fileSelectList'
import preAssignPop from '@/pages/assetoutfeedback/coordManage/preAssignPop'
import editAssignPop from '@/pages/assetoutfeedback/coordManage/editAssignPop'
import feedBackFreqSelectList from '@/components/element/assetoutfeedback/feedBackFreqSelectList'
import taskAssignListApi from '@/api/assetoutfeedback/coordManage/coordManageApi'
import traceUserSelectList from '@/components/element/assetoutfeedback/traceUserSelectList'
import * as format from '@/filters/index'
import mixin from '@/pages/mixin'
export default {
  name: 'taskAssignPop',
  extends: new BasePage(),
  mixins: [mixin],
  inject: {
    yfInit: {
      default: ''
    }
  },
  components: {
    DialogEdit,
    searchForm,
    DataTable,
    authButton,
    SelectDictionary,
    dymForm,
    fileSelectList,
    preAssignPop,
    editAssignPop,
    feedBackFreqSelectList,
    traceUserSelectList,
    SpanPlus,
    BaseSelect
  },
  props: {
    editModel: {
      type: [String],
      default () {
        return 'E'
      }
    },
    projectInfo: {
      required: true,
      type: [Object],
      default () {
        return null
      }
    },
    feedbackResource: {
      required: true,
      type: [String],
      default () {
        return '1'
      }
    },
    fileAll: {
      type: [Array],
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      preAssignVisible: false,
      editAssignVisible: false,
      showHandleFlag: true,
      newEditModel: 'V',
      selectedRows: [], // 选中行
      slectedKeyIds: [], // 选中keyId
      assignBtn: false,
      modifyBtn: false,
      assignType: '', // 变更分配类型
      loadCount: 0,
      pageCount: 0,
      pageSizes: [10, 20, 30, 40, 50],
      pageLayout: 'total, sizes, prev, pager, next, jumper',
      currentTotal: 0,
      keyId: [],
      assignKeyId: [],
      assignStatus: '',
      queryParas: {
        pageIndex: 1,
        pageSize: 10,
        assignStatus: '1',
        feedbackResource: this.feedbackResource,
        projectName: '',
        periods: '',
        traceUserId: ''
      },
      rules: {
        projectName: [{ required: true, message: '', trigger: 'blur' }],
        periods: [{ required: true, message: '', trigger: 'blur' }]
      },
      componentList1: [
        {
          // 产品名称
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.projectName,
          cols: [8, 8, 8],
          disabled: true,
          prop: 'projectName',
          value: 'projectName',
          labelWidth: '130px',
          componentName: 'el-input'
        },
        {
          // 期数
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.periods,
          cols: [8, 8, 8],
          disabled: true,
          prop: 'periods',
          value: 'periods',
          labelWidth: '130px',
          componentName: 'el-input'
        },
        {
          // 来源
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.resource,
          cols: [8, 8, 8],
          disabled: false,
          value: 'feedbackResource',
          clearable: true,
          labelWidth: '130px',
          placeholder: this.$t('common.pleaseSelect'),
          componentName: SelectDictionary,
          dictTypeCode: 'AUDIT_OUT_FEEDBACK_RESOURCE'
        },
        {
          // 文件类型
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.fileType,
          cols: [8, 8, 8],
          disabled: false,
          value: 'auditFileType',
          clearable: true,
          labelWidth: '132px',
          attrs: { 'isAll': true },
          placeholder: this.$t('common.pleaseSelect'),
          multiple: true,
          componentName: fileSelectList
        },
        {
          // 反馈批次
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.fkpc,
          cols: [8, 8, 8],
          disabled: false,
          value: 'feedbackFrequency',
          labelWidth: '132px',
          placeholder: this.$t('common.pleaseSelect'),
          queryName: ['projectId', 'periods', 'auditFileType'],
          queryValue: ['projectId', 'periods', 'auditFileType'],
          componentName: feedBackFreqSelectList
        },
        {
          // 分配状态
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.assignStatus,
          cols: [8, 8, 8],
          disabled: false,
          value: 'assignStatus',
          labelWidth: '130px',
          placeholder: this.$t('common.pleaseSelect'),
          componentName: BaseSelect,
          options: [
            {
              'id': '1',
              'name': '未分配'
            },
            {
              'id': '2',
              'name': '已分配'
            }
          ]
        }
      ],
      columns: [
        {
          // 分配状态
          prop: 'assignStatus',
          align: 'center',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.assignStatus,
          format: (row) => {
            if (row.assignStatus === '1') {
              return '未分配'
            } else if (row.assignStatus === '2') {
              return '已分配'
            }
          }
        },
        {
          // 来源
          prop: 'feedbackResource',
          align: 'center',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.resource,
          format: (row) => {
            return format.formatDict(row.feedbackResource, 'AUDIT_OUT_FEEDBACK_RESOURCE')
          }
        },
        {
          // 文件类型
          prop: 'auditFileType',
          align: 'left',
          width: '150px',
          slot: true,
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.fileType
        },
        {
          // 付款确认书编号
          prop: 'assetCode',
          align: 'left',
          width: '180px',
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.payCode
        },
        {
          // 律所反馈问题
          prop: 'feedbackQuestionContent',
          align: 'left',
          slot: true,
          width: '300px',
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.lsfkwt
        },
        {
          // 跟进人
          prop: 'traceUserName',
          align: 'left',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].coordManageMain.tracer
        }
      ],
      sourceData: [],
      dataStatus: {}
    }
  },
  mounted () {
    Object.assign(this.queryParas, this.projectInfo)
    this.$nextTick(() => {
      this.handleFilter()
    })
  },
  watch: {
    'queryParas.feedbackResource' (now, old) {
      if (now !== old) {
        this.handleFilter()
      }
    }
  },
  computed: {
    api () {
      return taskAssignListApi.taskAssignList
    }
  },
  methods: {
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10
      }
      Object.assign(this.queryParas, this.projectInfo)
    },
    handleFilter () {
      this.$nextTick(() => {
        this.loadCount++
        this.loadData()
      })
    },
    // 每页条数变更时
    handleSizeChange (val) {
      this.queryParas.pageSize = val
      this.queryParas.pageIndex = 1
      this.loadData()
    },
    // 当前页数改变时
    handleCurrentChange (val) {
      this.queryParas.pageIndex = val
      this.loadData()
    },
    formatType (data) {
      let fileType = this.fileAll
      let auditFileType = fileType.filter(item => {
        return data.auditFileType === item.fileType
      })
      return auditFileType.length > 0 ? auditFileType[0].fileName : ''
    },
    // 数据加载
    loadData () {
      let pageInfo = {}
      this.api.getList(this.queryParas).then(res => {
        if (res.success) {
          this.sourceData = res.data.taskAllocationDTOPage.datas
          pageInfo = {
            pageIndex: res.data.taskAllocationDTOPage.pageIndex,
            pageSize: res.data.taskAllocationDTOPage.pageSize
          }
          this.pageCount = res.data.taskAllocationDTOPage.totalPage
          this.currentTotal = res.data.taskAllocationDTOPage.totalRow
          Object.assign(this.queryParas, pageInfo)
          this.dataStatus = res.data
        }
      })
    },
    // 选择行
    selectRowChange (selectedRows) {
      this.selectedRows = selectedRows
      if (selectedRows.length > 0) { this.assignStatus = selectedRows[0].assignStatus }
    },
    // 预分配
    showPreAssign () {
      this.newEditModel = 'E'
      this.preAssignVisible = true
    },
    // 批量变更/分配
    showBatchEditAssign (type) {
      if (this.selectedRows.length === 0) {
        this.warning('没有可进行变更分配的数据')
        return
      }
      let res = this.taskCheck(this.selectedRows)
      if (res) {
        if (this.selectedRows[0].assignStatus === '1' && type === '2') { // 未分配
          this.warning('只可对数据进行分配')
        } else if (this.selectedRows[0].assignStatus === '2' && type === '1') {
          this.warning('只可对数据进行变更')
        } else {
          this.newEditModel = 'V'
          this.assignKeyId = this.selectedRows.map(it => {
            return it.assignKeyId
          })
          this.keyId = this.selectedRows.map(it => {
            return it.keyId
          })
          this.assignType = type
          this.editAssignVisible = true
        }
      } else {
        this.warning('请选择同种状态的数据')
      }
    },
    taskCheck (data) {
      let flag = true
      this.modifyBtn = false
      this.assignBtn = false
      if (data.length > 0) {
        data.forEach((item, index) => {
          if (index < data.length - 1) {
            if (item.assignStatus !== data[index + 1].assignStatus) {
              flag = false
            }
          }
        })
      }
      return flag
    },
    // 变更分配
    showEditAssign (val) {
      this.newEditModel = 'V'
      this.keyId[0] = val.keyId
      this.assignKeyId[0] = val.assignKeyId
      this.assignStatus = val.assignStatus
      if (val.assignStatus === '1') {
        this.assignType = '1'
      } else {
        this.assignType = '2'
      }
      this.editAssignVisible = true
    },
    chooseBtnClick (data) {
      if (data) {
        this.$nextTick(() => {
          this.handleFilter()
        })
      }
    },
    feedbackQuestionFormat (val) {
      if (!val) {
        return '————'
      } else {
        let data = []
        val.forEach((item, index) => {
          let i = index + 1
          data.push(i + '、' + item)
        })
        return data.join('。')
      }
    },
    close () {
      this.$emit('close', true)
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/assetoutfeedback/common.scss'
</style>
