<template>
  <template-page
    ref="pageRef"
    :get-list="getList"
    :export-list="exportList"
    :options-evens-group="optionsEvensGroup"
    :operation="operation()"
    :table-events="tableEvents"
    :table-attributes="tableAttributes"
    :column-parsing="columnParsing"
  >
    <el-dialog title="价格类型" :visible.sync="visible" width="40%" @close="handleClose">
      <el-form ref="formData" :model="formData" label-width="120px" :inline="false" size="mini" :disabled="disabled">
        <el-form-item label="价格类型编号" prop="priceTypeCode">
          <el-input v-model="formData.priceTypeCode" :disabled="edit"/>
        </el-form-item>
        <el-form-item label="价格类型名称" prop="priceTypeName">
          <el-input v-model="formData.priceTypeName" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="formData.status" :active-value="true" :inactive-value="false" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :disabled="disabled" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import add_callback_mixin from '@/components/template/add_callback_mixin.js'
import Popu from '@/components/template/popu.vue'
import {
  getProductPriceListV2,
  exportProductPriceListV2,
  addProductPrice,
  editProductPrice,
  updateProductPriceStatus,
  getProductPriceDetail,
  delProductPrice
} from '@/api/priceType'
import { async } from 'q'
export default {
  components: { TemplatePage, Popu },
  mixins: [import_mixin, add_callback_mixin],
  data() {
    return {
      visible: false,
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '新增',
              click: this.addOn(() => {
                this.handleShow()
              })
              // isRole: this.$checkBtnRole('add', this.$route.meta.roles)
            }
          ]
        ],
        [
          [
            {
              name: '批量删除',
              click: async() => {
                if (this.recordSelected.length === 0) {
                  this.$message.error('请选择需要删除的数据')
                  return
                }
                const ids = this.recordSelected.map(v => {
                  return v.priceTypeId
                })
                const params = ids
                await delProductPrice(params)
                this.$refs.pageRef.refreshList()
                this.$message.success('批量删除成功')
              }
            }
          ]
        ]
      ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      }, // 关闭新增弹窗

      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      edit: false,
      disabled: false,
      formData: {
        priceTypeCode: '',
        priceTypeName: '',
        status: true
      }
    }
  },
  methods: {
    // 列表请求函数
    getList(...p) {
      this.recordSelected = []
      return getProductPriceListV2(...p)
    },
    // 列表导出函数
    exportList: exportProductPriceListV2,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.colName === 'status') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div>
              <el-switch
                value={row.status}
                onInput={value => (row.status = value)}
                active-value='有效'
                inactive-value='无效'
                onChange={() => {
                  updateProductPriceStatus({
                    priceTypeId: row.priceTypeId,
                    status: row.status === '有效' ? 'ON' : 'OFF'
                  }).then(res => {
                    this.$successMsg('状态更改成功')
                  })
                }}
              ></el-switch>
              <span style='margin-left:10px'>{row.statusMap && row.statusMap[row.status]}</span>
            </div>
          )
        }
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class='operation-btns'>
            <el-button
              type='text'
              size='default'
              onClick={ async() => {
                this.getDetail(row.priceTypeId)
                this.disabled = true
                this.handleShow()
              }}
            >详情</el-button>
            <el-button
              type='text'
              size='default'
              onClick={ async() => {
                this.getDetail(row.priceTypeId)
                this.edit = true
                this.handleShow()
              }}
            >编辑</el-button>
            <el-popconfirm
              onConfirm={() => {
                delProductPrice([row.priceTypeId]).then(res => {
                  this.$successMsg('删除成功')
                  this.$refs.pageRef.refreshList()
                })
              }}
              title='是否确定需要删除该项内容?'
            >
              <el-button slot='reference' size='mini' type='text'>
                  删除
              </el-button>
            </el-popconfirm>
          </div>
        )
      }
    },
    handleClose() {
      this.edit = false
      this.disabled = false
      this.$refs.formData.resetFields()
      this.addOff(() => {
        this.visible = false
      })()
    },
    handleShow() {
      this.visible = true
    },
    async getDetail(priceTypeId) {
      const { data } = await getProductPriceDetail({ priceTypeId })
      this.formData = { ...data }
    },
    handleSubmit() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          const params = {
            ...this.formData
          }

          if (!this.edit) {
            params.priceTypeId = ''
            addProductPrice(params).then(res => {
              this.handleClose()
              this.$successMsg('新增成功')
              this.$refs.pageRef.refreshList()
            })
          } else {
            editProductPrice(params).then(res => {
              this.edit = false
              this.handleClose()
              this.$successMsg('编辑成功')
              this.$refs.pageRef.refreshList()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
