<template>
  <template-page
    ref="pageRef"
    :getList="getList"
    :optionsEvensGroup="optionsEvensGroup"
    :operation="operation()"
    :columnParsing="columnParsing"
    :tableAttributes="tableAttributes"
    :tableEvents="tableEvents"
  >
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import Mixin from '@/mixin/index'
import {
  getProductDelete,
  getProductPriceList,
  v2ProductPriceList,
  getTypeList,
  handlePriceRevoke
} from '@/api/basic_data/material'
import { getCategoryList } from '@/api/common'

export default {
  components: { TemplatePage },
  mixins: [],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '批量删除',
              click: async () => {
                if (this.recordSelected.length === 0) {
                  this.$message.error('请选择需要删除的数据')
                  return
                }
                this.handleDelete()
              },
              isRole: this.$checkBtnRole('del', this.$route.meta.roles)
            }
          ]
        ],
        [
          [
            {
              name: '批量作废',
              click: async () => {
                if (this.recordSelected.length === 0) {
                  this.$message.error('请选择需要作废的数据')
                  return
                }
                this.handleRevokeAll()
              }
            }
          ]
        ]
      ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],

      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: [],
      screenForm: {
        k3CategoryNumber: '',
        endDate: '',
        materialName: '',
        materialNumber: '',
        materialOldNumber: '',
        saleTypeId: '',
        specification: '',
        startDate: '',
        remark: ''
      },
      ztypeList: [],
      dictList: {},
      isCollapse: true
    }
  },
  mounted() {
    // getCategoryList({ pageNum: 1, pageSize: -1 }).then(res => {
    //   this.dictList = res.data.records
    //   console.log(this.dictList, 777777)
    // })
  },
  methods: {
    // 列表请求函数
    getList(...p) {
      let params = {
        moduleId: p[0].moduleId,
        orderBy: p[0].orderBy,
        pageNum: p[0].pageNum,
        pageSize: p[0].pageSize,
        params: [...p[0].params, { param: 'bill_type', compare: '=', value: 'HOME' }]
      }
      return v2ProductPriceList(params)
    },
    // 列表导出函数
    // exportList: v2ProductPriceListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class="operation-btns">
            {row.isRevoke === '否' ? (
              <el-popconfirm
                onOnConfirm={async () => {
                  this.handleRevoke(row.id)
                }}
                title="是否确定需要作废该项内容?"
              >
                <el-button slot="reference" size="mini" type="text">
                  作废
                </el-button>
              </el-popconfirm>
            ) : (
              ''
            )}

            {this.$checkBtnRole('del', this.$route.meta.roles) ? (
              <el-popconfirm
                onOnConfirm={async () => {
                  this.handleDelete(row.id)
                }}
                title="是否确定需要删除该项内容?"
              >
                <el-button slot="reference" size="mini" type="text">
                  删除
                </el-button>
              </el-popconfirm>
            ) : (
              ''
            )}
          </div>
        )
      }
    },

    addFn() {
      this.showDialogForm = true
    },

    hanleDeleteAllPromise(id) {
      return new Promise((resolve, reject) => {
        const ids = id
          ? [id]
          : this.recordSelected.map(v => {
              return v.id
            })
        if (!ids.length) {
          this.$errorMsg('请选择删除内容')
          return
        }
        resolve(ids)
      })
    },

    handleDelete(id) {
      this.hanleDeleteAllPromise(id).then(ids => {
        getProductDelete(ids).then(res => {
          this.$successMsg('删除成功')
          // this.getList()
          this.$refs.pageRef.refreshList()
        })
      })
    },
    // getList() {
    //   this.listLoading = true
    //   const params = {
    //     pageNum: this.currentPage,
    //     pageSize: this.pageSize,
    //     k3CategoryNumber: this.screenForm.k3CategoryNumber,
    //     endDate: this.screenForm.endDate,
    //     materialName: this.screenForm.materialName,
    //     materialNumber: this.screenForm.materialNumber,
    //     materialOldNumber: this.screenForm.materialOldNumber,
    //     saleTypeId: this.screenForm.saleTypeId,
    //     specification: this.screenForm.specification,
    //     startDate: this.screenForm.startDate,
    //     remark: this.screenForm.remark,
    //     billType: 'HOME'
    //   }
    //   getProductPriceList(params).then(res => {
    //     this.dataList = res.data.records
    //     console.log(res.data.records)
    //     this.listTotal = res.data.total
    //     this.listLoading = false
    //   })
    //   getTypeList({ ...params, pageNum: 1, pageSize: -1 }).then(res => {
    //     this.ztypeList = res.data.records
    //     // console.log(this.ztypeList, "type1111");
    //   })
    // },
    handleRevoke(id) {
      handlePriceRevoke({ ids: id }).then(res => {
        this.$successMsg('操作成功')
        // this.getList()
        this.$refs.pageRef.refreshList()
      })
    },
    handleRevokeAll() {
      handlePriceRevoke({
        ids: this.recordSelected
          .map(v => {
            return v.id
          })
          .toString()
      }).then(res => {
        this.$successMsg('操作成功')
        // this.getList()
        this.$refs.pageRef.refreshList()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      // || row.examineStatus=='FAIL'
      if (this.ids.includes(row.id)) {
        return 'warning-row'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .warning-row {
  background: oldlace;
}

::v-deep .el-select--small {
  width: 100%;
}
::v-deep .el-date-editor {
  width: 100%;
}
::v-deep .el-select {
  width: 100%;
}
</style>
