<!-- ABS资产抽查管理 -->
<template>
  <div class="sampleMgrMain">
    <!-- <up-down-layout :handleFlag.sync="handleFlag">
      <template slot="query"> -->
        <el-card shadow="never">
          <!-- 搜索栏 -->
          <div class="flex-spaceB" style="border-bottom:1px solid #f3f3f3">
            <el-form ref="form" :rules="rules" :model="form" style="width:60%">
              <dym-form :formValue.sync="form" searchPerms="search" resetPerms="reset" :componentList="componentList" @selectChanged="selectChanged"></dym-form>
            </el-form>
            <div align="right" style="margin-bottom:20px">
                <auth-button type="primary" :size="'medium'" icon="iconfont iconycchaxun" :label="$t('common.search')" @click="search"></auth-button>
                <btn-upload fileType=".xlsx,.xls" icon="iconfont iconycdaoru" :uploadApi="uploadApi" type="primary" :btnSize="'medium'" :uploadName="$t('sampleMgrMain.import')" @uploadSuccess="importAsset" style="margin:0;margin-left:10px"></btn-upload>
            </div>
          </div>
          <div class="column-spaceB">
            <!-- 统计数据 -->
            <el-row style="align-self:flex-start;width:100%" v-loading="assetpkgmgrButtonLoading">
              <el-col :span="12" v-for="(item,index) in statistics" :key="index">
                <div class="statistics-item">{{`${item.name}：${item.number}`}}</div>
              </el-col>
            </el-row>
            <!-- 操作按钮 -->
            <div align="center" style="margin:40px 0 0">
                <auth-button type="primary" :size="'medium'" icon="iconfont iconycxiazai" :label="$t('sampleMgrMain.download')" @click="downloadSample"></auth-button>
                <auth-button type="primary" :size="'medium'" icon="iconfont iconycpiliangxiazai" :label="$t('sampleMgrMain.downloadAll')" @click="downloadAll"></auth-button>
            </div>
          </div>
        </el-card>
      <!-- </template> -->
      <!-- 相关规则说明 -->
      <!-- <template slot="table">
          <external-transition :title="$t('sampleMgrMain.ruleIllustrate')"></external-transition>
          <div align="center">
            <div style="width:70%">
              <data-table :columns="columns" :sourceData="sourceData" :showPage="false" v-bind="{spanMethod:objectSpanMethod}">
                <template #rule="scope">
                  <div style="white-space: pre-line;">
                    {{scope.row.rule}}
                  </div>
                </template>
              </data-table>
            </div>
          </div>
      </template> -->
    <!-- </up-down-layout> -->
    <!-- 导出结果 -->
    <dialog-form :attr="{width:'500px'}" :visible.sync="isExport" editModel="E" :form="exportResult" :autoSave="false" :isExport="true">
    </dialog-form>
  </div>
</template>
<script>
import {
  upDownLayout,
  dymForm,
  DataTable,
  amountInput,
  btnDownload,
  btnUpload,
  authButton
} from 'newepoch-components'
import fileApi from '@/api/fileApi.js'
import {
  downFile
} from '@/utils/devUtils'
import { UPLOAD_API } from '@/constant.js'
import dialogForm from '@/components/element/assetoutfeedback/dialogForm'
// import TraceProjectSelectList from '@/components/element/assetoutfeedback/TraceProjectSelectList'
import absFileSelectList from '@/components/element/assetoutfeedback/absFileSelectList'
import externalTransition from '@/components/element/assetoutfeedback/externalTransition'
import sampleMgrMain from '@/api/assetoutfeedback/sampleMgrMain/sampleMgrMain.js'
import BasePage from '@/pages/basePage'

export default {
  extends: new BasePage(),
  name: 'sampleMgrMain',
  components: {
    dymForm,
    upDownLayout,
    authButton,
    DataTable,
    btnDownload,
    dialogForm,
    btnUpload,
    externalTransition
  },
  data () {
    return {
      uploadApi: UPLOAD_API,
      exportResult: {}, // 导入结果
      isExport: false, // 导出结果弹窗控件
      // 统计数据
      statistics: [
        // 本期总笔数
        {
          name: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.totalNum,
          number: 0
        },
        // 已完成审核笔数
        {
          name: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.finshedNum,
          number: 0
        },
        // 已提交律所笔数
        {
          name: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.submitedNum,
          number: 0
        },
        // 新增提交律所笔数
        {
          name: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.addNum,
          number: 0
        }
      ],
      // 表格列表
      sourceData: [
        {
          model: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.modelOne,
          project: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.projectOne,
          rule: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.ruleOne,
          remark: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.remarks
        },
        {
          model: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.modelTwo,
          project: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.projectTwo,
          rule: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.ruleTwo
        },
        {
          model: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.modelThree,
          project: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.projectThree,
          rule: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.ruleThree,
          remark: this.$i18n.messages[this.$i18n.locale].common.noForm
        }
      ],
      // 表格头部
      columns: [
        {
          // 可抽查清单规则，按照项目可配置以下三种模式
          headerAlign: 'center',
          label: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.header,
          child: [
            {
              // 模式
              prop: 'model',
              align: 'center',
              label: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.model
            },
            {
              // 项目
              prop: 'project',
              align: 'center',
              label: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.project
            },
            {
              // 可抽查规则
              prop: 'rule',
              headerAlign: 'center',
              slot: true,
              label: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.rule
            },
            {
              // 备注
              prop: 'remark',
              headerAlign: 'center',
              label: this.$i18n.messages[this.$i18n.locale].sampleMgrMain.remark
            }
          ]
        }
      ],
      // 表单校验
      rules: {
        projectId: [
          {
            required: true,
            message: this.$t('sampleMgrMain.projectPrompt'),
            trigger: 'change'
          }
        ],
        periods: [
          {
            required: true,
            message: this.$t('sampleMgrMain.issuePrompt'),
            trigger: 'blur'
          }
        ]
      },
      // 表单
      form: {
        acquiringAssets: '1'
      },
      // 表单列表
      componentList: [
        {
          // 产品名称
          label: this.$i18n.messages[this.$i18n.locale].common.productName,
          disabled: false,
          value: 'projectId',
          prop: 'projectId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '80px',
          cols: [12, 12, 12],
          clearable: true,
          name: 'productName',
          componentName: absFileSelectList
          // componentName: TraceProjectSelectList,
        },
        {
          // 期数
          label: this.$i18n.messages[this.$i18n.locale].common.periodsNum,
          disabled: false,
          value: 'periods',
          prop: 'periods',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '80px',
          clearable: true,
          maxlength: 3,
          cols: [12, 12, 12],
          componentName: amountInput
        }
      ]
    }
  },
  methods: {
    // 下拉框选中回调
    selectChanged (a, b, c) {
      // 产品名称
      if (a.productNameInfo) {
        this.$set(this.form, 'projectName', a.productNameInfo.projectName)
      }
    },
    // 下载
    downloadFile (fileId) {
      fileApi.file.download({
        keyId: fileId
      }).then(ress => {
        downFile(ress)
      })
    },
    // 查询
    search () {
      this.checkForm(() => {
        // 资产类型为1
        this.form.acquiringAssets = '1'
        this.assetpkgmgrButtonLoading = true
        sampleMgrMain.count.getDefault(this.form).then(res => {
          let datas = res.data
          this.assetpkgmgrButtonLoading = false
          if (res.success && datas) {
            this.statistics[0].number = datas.sumCount || 0// 本期总笔数
            this.statistics[1].number = datas.reviewedCount || 0// 已完成审核笔数
            this.statistics[2].number = datas.submitCount || 0// 已提交律所笔数
            this.statistics[3].number = datas.newSubmitCount || 0 // 新增提交律所笔数
          }
        }).catch(res => {
          this.assetpkgmgrButtonLoading = false
        })
      })
    },
    // 导入抽入资产
    importAsset (e) {
      sampleMgrMain.importAsset.putParams({ keyId: e.fileID.toString() }).then(res => {
        if (res.success && res.data) {
          this.exportResult = res.data
          this.isExport = true
        }
      })
    },
    // 下载可抽查数据
    downloadSample () {
      let that = this
      this.checkForm(() => {
        that.$confirm(that.$t('common.confirm') + that.$t('sampleMgrMain.download') + '？', that.$t('common.tip'), {
          type: 'warning'
        }).then(() => {
          // 资产类型为1
          this.form.acquiringAssets = '1'
          sampleMgrMain.download.create(this.form).then(res => {
            if (res.success && res.data) {
              this.downloadFile(res.data)
              this.search()
            } else {
              this.error(this.$t('feedBackMain.downloadError'))
            }
          })
        }).catch((e) => {})
      })
    },
    // 下载本期所有数据
    downloadAll () {
      let that = this
      that.checkForm(() => {
        that.$confirm(that.$t('common.confirm') + that.$t('sampleMgrMain.downloadAll') + '？', that.$t('common.tip'), {
          type: 'warning'
        }).then(() => {
          // 资产类型为2
          this.form.acquiringAssets = '2'
          sampleMgrMain.downloadAll.getDefault(that.form).then(res => {
            if (res.success && res.data) {
              that.downloadFile(res.data)
            } else {
              that.error(that.$t('feedBackMain.downloadError'))
            }
          })
        }).catch((e) => {})
      })
    },
    // 校验表单
    checkForm (callback) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          callback && callback()
        }
      })
    },
    // 合并列
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 3) {
        if (rowIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 1
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/styles/assetoutfeedback/common.scss'
</style>
