<template>
  <div>
    <AutoResizer :given-height="250">
      <template #default="{height}">
        <el-table
          v-if="columnsList.length > 0"
          v-loading="loading"
          :height="height"
          :data="list"
          border
        >
          <el-table-column
            v-if="columnsList[0].visible"
            :key="Math.random()"
            label="退料单号"
            align="center"
            prop="orderNo"
            width="170"
            fixed="left"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleAdd(scope.row)"
              >{{ scope.row.orderNo }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnsList[1].visible"
            :key="Math.random()"
            label="退料状态"
            align="center"
            prop="status"
            width="120"
          >
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.WMS_RETURN_STATUS" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnsList[2].visible"
            :key="Math.random()"
            label="退料原因"
            align="center"
            prop="remark"
            width="120"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columnsList[3].visible"
            :key="Math.random()"
            label="退料类型"
            align="center"
            prop="returnType"
          >
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.WMS_MATERIAL_RETURN_TYPE" :value="scope.row.returnType" />
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnsList[4].visible"
            :key="Math.random()"
            label="审核状态"
            align="center"
            prop="auditStatus"
            width="100"
          >
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.WMS_RETURN_MATERIALS_APPROVAL_STATUS" :value="scope.row.auditStatus" />
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnsList[5].visible"
            :key="Math.random()"
            label="提交人"
            align="center"
            prop="commitPerson"
          />
          <el-table-column
            v-if="columnsList[6].visible"
            :key="Math.random()"
            label="提交时间"
            align="center"
            prop="commitTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.commitTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnsList[7].visible"
            :key="Math.random()"
            label="qc审核人"
            align="center"
            prop="qcAuditor"
          />
          <el-table-column
            v-if="columnsList[8].visible"
            :key="Math.random()"
            label="qc审核时间"
            align="center"
            prop="qcAuditTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.qcAuditTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnsList[9].visible"
            :key="Math.random()"
            label="过账审核人"
            align="center"
            prop="gzAuditor"
            width="120"
          />
          <el-table-column
            v-if="columnsList[10].visible"
            :key="Math.random()"
            label="过账审核时间"
            align="center"
            prop="gzAuditTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.gzAuditTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columnsList[11].visible"
            :key="Math.random()"
            label="创建人"
            align="center"
            prop="creator"
            width="100"
          />
          <el-table-column
            v-if="columnsList[12].visible"
            :key="Math.random()"
            label="创建时间"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="220"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                v-show="queryParams.auditStatus === 0 || queryParams.auditStatus === 1"
                size="mini"
                type="text"
                icon="el-icon-circle-check"
                @click="handleApproval(scope.row)"
              >审批</el-button>
              <el-button
                v-hasPermi="['wms:return-work-order-pre:delete']"
                size="mini"
                type="text"
                icon="el-icon-delete"
                class="text-danger"
                :disabled="queryParams.auditStatus !== -1"
                @click="handleDelete(scope.row)"
              >删除</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleViewLogs(scope.row)"
              >查看日志</el-button>
              <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleReturnDetails(scope.row)"
          >查看</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </template>
    </AutoResizer>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 退料日志 -->
    <ReturnLogs ref="returnLogs" />
    <!-- 退料操作 -->
    <ReturnMaterialList ref="returnMaterials" @complete="getList" />
    <!-- 退料前置详情查看 -->
    <ReturnDetails ref="returnDetails" />

    <!-- 批核选择 -->
    <el-dialog
      title="审核"
      :visible.sync="auditVisible"
      width="30%"
      @close="dialogClose"
    >
      <el-form
        ref="auditForm"
        :model="auditParams"
        size="small"
        label-width="88px"
        :rules="rules"
      >
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="审核结果" prop="flag">
              <el-select v-model="auditParams.flag" placeholder="请选择审核结果" @change="change">
                <el-option
                  v-for="item in auditSelect"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item v-show="encodedEmployeeIdShow" label="签收人" prop="encodedEmployeeId">
              <el-input
                v-model="auditParams.encodedEmployeeId"
                placeholder="请输入/扫入签收人工号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item v-show="reasonIsShow" label="驳回原因" prop="reason">
              <el-input
                v-model="auditParams.reason"
                type="textarea"
                :rows="2"
                placeholder="请输入驳回原因"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false">取 消</el-button>
        <el-button v-loading="ensureLoading" type="primary" @click="ensureApproval">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getReturnWorkOrderPrePage, qcAudit, gzAudit, deleteReturnWorkOrderPre } from '@/api/wms/output/materialReturn'
// import { getEmployeeMaster } from '@/api/wms/output/otherIssue'
import ReturnMaterialList from './ReturnMaterialList.vue'
import ReturnDetails from './ReturnDetails.vue'
import ReturnLogs from './ReturnLogs.vue'
// import { Base64 } from 'js-base64'
import { getFormColumnsList } from '@/api/system/saveColumns/index'
import { mapGetters } from 'vuex'
import { isArray } from 'min-dash'

export default {
  inject: ['headerFormFn'],
  components: {
    ReturnLogs,
    ReturnMaterialList,
    ReturnDetails
  },
  data() {
    return {
      // 列表
      list: [],
      // 审核结果
      auditVisible: false,
      // 驳回意见是否必填
      reasonRequired: false,
      // 是否显示驳回原因
      reasonIsShow: false,
      // 是否显示签收人
      encodedEmployeeIdShow: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        auditStatus: -1
      },
      total: 0,
      loading: false,
      ensureLoading: false,
      auditParams: {
        id: '',
        reason: '',
        flag: '',
        encodedEmployeeId: undefined
      },
      auditSelect: [
        {
          label: '驳回',
          code: 0
        },
        {
          label: '通过',
          code: 1
        }
      ],
      rules: {
        flag: [{ required: true, message: '审核结果不能为空', trigger: 'change' }],
        reason: [{ required: false, message: '驳回原因不能为空', trigger: 'blur' }],
        encodedEmployeeId: [{ required: false, message: '签收人不能为空', trigger: 'blur' }]
      },
      // 显示隐藏列参数
      columns: [
        { key: 0, label: '退料单号', visible: true },
        { key: 1, label: '退料状态', visible: true },
        { key: 2, label: '退料原因', visible: true },
        { key: 3, label: '退料类型', visible: true },
        { key: 4, label: '审核状态', visible: true },
        { key: 5, label: '提交人', visible: true },
        { key: 6, label: '提交时间', visible: true },
        { key: 7, label: 'qc审核人', visible: true },
        { key: 8, label: 'qc审核时间', visible: true },
        { key: 9, label: '过账审核人', visible: true },
        { key: 10, label: '过账审核时间', visible: true },
        { key: 11, label: '创建人', visible: true },
        { key: 12, label: '创建时间', visible: true }
      ],
      // 显示隐藏持久化参数
      columnsList: []
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ]),
    headerForm() {
      return this.headerFormFn()
    }
  },
  created() {
    // 获取显隐列列表
    this.getColumnsList()
    this.handleQuery()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      const params = {
        ...this.queryParams,
        ...this.headerFormFn()
      }
      // 执行查询
      getReturnWorkOrderPrePage(params).then(response => {
        this.list = response.data.list
        this.total = response.data.total
      }).finally(() => {
        this.loading = false
      })
    },
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    // 新增
    handleAdd(row) {
      const { id, auditStatus, returnType, remark } = row
      this.$refs.returnMaterials.auditStatus = auditStatus
      this.$refs.returnMaterials.open = true
      this.$refs.returnMaterials.queryParams.wmsReturnWorkOrderPreId = id
      if (auditStatus !== -1) {
        this.$refs.returnMaterials.returnDis = true
      }
      this.$refs.returnMaterials.queryParams.returnType = returnType + ''
      this.$refs.returnMaterials.queryParams.remark = remark
      if (auditStatus !== -1) {
        this.$refs.returnMaterials.deleteMaterialDis = true
      }
    },
    // 查看日志
    handleViewLogs(row) {
      const { id } = row
      this.$refs.returnLogs.queryParams.wmsReturnWorkOrderPreId = id
      this.$refs.returnLogs.open = true
    },
    // 审批
    handleApproval(row) {
      const { id } = row
      this.auditParams.id = id
      this.auditVisible = true
    },
    // 提交审核
    ensureApproval() {
      this.$refs['auditForm'].validate(valid => {
        if (!valid) {
          return
        }
        const params = {
          ...this.auditParams,
          encodedEmployeeId: this.auditParams.encodedEmployeeId
        }
        this.ensureLoading = true
        // qc审核
        if (this.queryParams.auditStatus === 0) {
          qcAudit(params).then(res => {
            this.$modal.msgSuccess('QC审核完成~')
            this.auditVisible = false
            this.getList()
          }).finally(() => {
            this.ensureLoading = false
          })
          // 过账审核
        } else if (this.queryParams.auditStatus === 1) {
          gzAudit(params).then(res => {
            this.$modal.msgSuccess('过账审核完成~')
            this.auditVisible = false
            this.getList()
          }).finally(() => {
            this.ensureLoading = false
          })
        }
      })
    },
    change(v) {
      if (v === 0) {
        this.reasonIsShow = true
        this.encodedEmployeeIdShow = false
        this.rules.reason[0].required = true
        this.rules.encodedEmployeeId[0].required = false
      } else {
        const { auditStatus } = this.queryParams
        this.reasonIsShow = false
        if (auditStatus === 1) {
          this.encodedEmployeeIdShow = true
          this.rules.encodedEmployeeId[0].required = true
        }
        this.rules.reason[0].required = false
      }
    },
    // 审核窗口关闭
    dialogClose() {
      this.auditParams.flag = undefined
      this.auditParams.reason = undefined
      this.auditParams.encodedEmployeeId = undefined
    },
    // 删除退料
    handleDelete(row) {
      const { orderNo, id } = row
      this.$modal.confirm('是否确认删除退料单号为"' + orderNo + '"的数据项?').then(function() {
        return deleteReturnWorkOrderPre(id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    },
    // 获取显示隐藏列
    getColumnsList() {
      const { componentName } = this.$route.meta || null
      const params = {
        userId: this.userId,
        vueForm: componentName
      }
      getFormColumnsList(params).then(res => {
        if (isArray(res.data)) {
          this.columnsList = res.data.length === 0 ? this.columns : res.data
        } else {
          this.columnsList = this.columns
        }
      }).catch((err) => {
        if (err) {
          this.columnsList = this.columns
        }
      }).finally(() => {
        this.$emit('columns', this.columnsList)
      })
    }
    // 扫码签收人编码转换
    // handleSign() {
    //   this.auditParams.encodedEmployeeId = Base64.decode(this.auditParams.encodedEmployeeId)
    //   const base64Id = this.auditParams.encodedEmployeeId
    //   getEmployeeMaster(base64Id).then(res => {
    //     this.auditParams.encodedEmployeeId = res.data.employeeName
    //   })
    // }
  }
}
</script>
