<template>
  <template-page
    ref="pageRef"
    :getList="getList"
    :operation="operation()"
    :optionsEvensGroup="optionsEvensGroup"
    :exportList="exportList"
    :columnParsing="columnParsing"
    :tableAttributes="tableAttributes"
    :tableEvents="tableEvents"
  >
    <div>
      <el-dialog :visible.sync="dialogVisible" width="50%" @close="resetForm" :close-on-click-modal="false">
        <el-form ref="dialogForm" :model="dialogForm" :rules="type == 1 ? rules : {}" label-width="120px" size="normal">
          <el-form-item label="销售类型编码" prop="saleCode">
            <el-input v-model="dialogForm.saleCode"></el-input>
          </el-form-item>
          <el-form-item label="销售类型名称" prop="saleName">
            <el-input v-model="dialogForm.saleName"></el-input>
          </el-form-item>
          <!-- <el-form-item label="产品大类" prop="mainId">
            <el-select v-model="dialogForm.mainId" @change="handleChange">
              <el-option
                v-for="(item, index) in productList"
                :key="index"
                :label="item.productCategoryName"
                :value="item.productCategoryNumber"
              >
              </el-option>
            </el-select>

            <el-input v-model="dialogForm.mainName"></el-input> -->
          <!-- </el-form-item>  -->
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="dialogForm.status"
              :active-value="true"
              :inactive-value="false"
              :active-text="dialogForm.status ? '启用' : ''"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click=";(dialogVisible = false), resetForm()">取 消</el-button>
          <el-button type="primary" @click="handelInfo">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
// import add_callback_mixin from '@/components/template/add_callback_mixin.js'

// import Mixin from '@/mixin/index'
// import Pagination from '@/components/Pagination'
import {
  addData,
  delTypeData,
  getProductList,
  getTypeList,
  updateType,
  saleTypeRebateListV2,
  saleTypeRebateListV2Export
} from '@/api/policy_list'

export default {
  mixins: [],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '新增',
              click: () => {
                this.dialogVisible = true
                this.type = 1
              },
              isRole: this.$checkBtnRole('add', this.$route.meta.roles)
            }
          ]
        ]
      ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],

      type: 0, // 0,1
      screenForm: {
        saleCode: '',
        saleName: '',
        mainId: '',
        status: ''
      },
      dialogVisible: false,
      dialogForm: {
        id: '',
        saleCode: '',
        saleName: '',
        mainName: '',
        mainId: '',
        status: ''
      },
      dataList: [
        {
          date: '2016-05-02',
          name: '王小虎',
          label: '姓名',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      columns: [
        {
          prop: 'saleCode',
          lable: '销售类型编码',
          widht: 160
        },
        {
          prop: 'saleName',
          lable: '销售类型名称',
          widht: 160
        },

        {
          prop: 'status',
          lable: '状态',
          widht: 160
        },
        {
          prop: 'createBy',
          lable: '创建人',
          widht: 160
        },
        {
          prop: 'createTime',
          lable: '创建时间',
          widht: 160
        },
        {
          prop: 'updateBy',
          lable: '更新人',
          widht: 160
        },
        {
          prop: 'updateTime',
          lable: '更新时间',
          widht: 160
        }
      ],
      options: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 1,
          label: '已启用'
        },
        {
          value: 0,
          label: '已停用'
        }
      ],
      rules: {
        saleCode: [{ required: true, message: '请输入销售类型编码', trigger: 'blur' }],
        saleName: [{ required: true, message: '请输入销售类型名称', trigger: 'blur' }]
      },
      productList: []
    }
  },

  computed: {
    exParams() {
      return {
        saleCode: this.screenForm.saleCode,
        saleName: this.screenForm.saleName,
        status: this.screenForm.status
      }
    }
  },

  methods: {
    // 列表请求函数
    getList: saleTypeRebateListV2,
    // 列表导出函数
    exportList: saleTypeRebateListV2Export,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class="operation-btns">
            {this.$checkBtnRole('edit', this.$route.meta.roles) ? (
              <el-button
                size="mini"
                type="text"
                onClick={async () => {
                  this.hanleEdit(row)
                }}
              >
                编辑
              </el-button>
            ) : (
              ''
            )}

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

    // getList() {
    //   this.listLoading = true
    //   const params = {
    //     pageNum: this.currentPage,
    //     pageSize: this.pageSize,
    //     saleCode: this.screenForm.saleCode,
    //     saleName: this.screenForm.saleName,
    //     mainId: '',
    //     status: this.screenForm.status
    //   }
    //   getTypeList(params).then(res => {
    //     this.dataList = res.data.records
    //     this.listTotal = res.data.total
    //     this.listLoading = false
    //   })
    //   getProductList({
    //     productCategoryName: '',
    //     productCategoryNumber: ''
    //   }).then(res => {
    //     this.productList = res.data
    //   })
    // },
    handleChange(e) {
      this.productList.find(k => {
        if (k.productCategoryNumber == e) {
          this.dialogForm.mainId = k.productCategoryNumber
          this.dialogForm.mainName = k.productCategoryName
          this.screenForm.mainId = k.productCategoryNumber
          this.screenForm.mainName = k.productCategoryName
        }
      })
    },
    hanleDatele(id) {
      this.hanleDeleteAllPromise(id).then(ids => {
        delTypeData({
          id: ids[0]
        }).then(res => {
          this.$successMsg('删除成功')
          this.$refs.pageRef.refreshList()
          // this.getList()
        })
      })
    },
    hanleDeleteAllPromise(id) {
      return new Promise((resolve, reject) => {
        const ids = id ? [id] : this.ids
        if (!ids.length) {
          this.$errorMsg('请选择删除内容')
          return
        }
        resolve(ids)
      })
    },
    hanleEdit(item) {
      this.dialogForm = {
        id: item.id,
        saleCode: item.saleCode,
        saleName: item.saleName,
        mainName: item.mainName,
        status: item.status === '有效' ? true : false
      }
      this.type = 0
      this.dialogVisible = true
    },
    hanleDateil(item) {
      this.dialogVisible = true
      this.dialogForm = {
        ...item
      }
      this.type = 3
    },

    handleSwitch(e, id) {
      updateType({
        id,
        status: e
      }).then(res => {
        this.$successMsg('状态已更改')
        // this.hanleReset();
      })
    },

    handelInfo() {
      if (this.type == 1) {
        this.$refs.dialogForm.validate(valid => {
          if (valid) {
            const params = {
              ...this.dialogForm
            }
            addData(params).then(res => {
              console.log(res)
              this.$successMsg('添加成功')
              this.hanleReset()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else if (this.type == 0) {
        const upParams = {
          ...this.dialogForm
        }
        updateType(upParams).then(res => {
          this.$successMsg('修改成功')
          this.hanleReset()
        })
      } else {
        this.dialogVisible = false
      }
    },
    resetForm(formName) {
      this.$refs.dialogForm.resetFields()
    },
    hanleReset() {
      this.dialogForm = {
        id: '',
        saleCode: '',
        saleName: '',
        mainName: '',
        mainId: '',
        status: true
      }
      // this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
      // this.getList()
      this.$refs.pageRef.refreshList()
    }
  },
  components: {
    TemplatePage
  }
}
</script>

<style scoped>
.el-switch.is-disabled {
  opacity: inherit;
}
</style>
