<template>
  <div class="app-container">
    <div class="screen-container">
      <el-form ref="screenForm" :model="screenForm" size="mini" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :ms="6" :lg="6">
            <el-form-item prop="saleCode">
              <el-input v-model="screenForm.saleCode" placeholder="销售类型编码" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="6" :lg="6">
            <el-form-item prop="saleName">
              <el-input v-model="screenForm.saleName" placeholder="销售类型名称" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="6" :lg="6">
            <el-form-item prop="status">
              <el-select v-model="screenForm.status" placeholder="状态" size="small">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="6" :lg="6" class="tr">
            <el-form-item>
              <el-button type="primary" size="mini" @click="submitScreenForm">查询</el-button>
              <el-button type="primary" size="mini" @click="resetScreenForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button type="primary" size="mini" v-if="$checkBtnRole('add', $route.meta.roles)" @click="(dialogVisible = true), (type = 1)">新增</el-button>
      </div>
      <div class="fr">
        <ExportButton :exUrl="'sale/type/export'" :exParams="exParams" />
      </div>
    </div>
    <div class="mymain-container">
      <div class="table">
      <el-table v-loading="listLoading"  :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <template v-for="col in columns">
          <el-table-column align="left" :label="col.lable" :prop="col.prop" :min-width="col.widht" show-overflow-tooltip v-if="col.prop == 'status'">
            <template slot-scope="scope">
              <div style="z-index: 99">
                <el-switch v-model="scope.row.status" @change="handleSwitch($event, scope.row.id)" :active-text="scope.row.status ? '已启用' : '已禁用'">
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-else align="left" :label="col.lable" :prop="col.prop" :min-width="col.widht" show-overflow-tooltip>
          </el-table-column>
        </template>

        <el-table-column align="center" fixed="right" label="操作" min-width="160">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="hanleEdit(scope.row)" v-if="$checkBtnRole('edit', $route.meta.roles)">编辑</el-button>
            <!-- <el-button type="text" size="small" @click="hanleDateil(scope.row)">详情</el-button> -->
            <el-popconfirm title="这是一段内容确定删除吗？" style="margin-left: 10px" v-if="$checkBtnRole('del', $route.meta.roles)" @onConfirm="hanleDatele(scope.row.id)">
              <el-button slot="reference" type="text" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <!-- 分页 -->
      <div style="margin: 20px 0">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
        </el-pagination>
      </div>
    </div>
    <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>
  </div>
</template>

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

export default {
  mixins: [Mixin],
  data() {
    return {
      type: 0, // 0,1
      screenForm: {
        saleCode: "",
        saleName: "",
        mainId: "",
        status: "",
      },
      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() {
      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.getList();
        });
      });
    },
    hanleEdit(item) {
      this.dialogForm = {
        id: item.id,
        saleCode: item.saleCode,
        saleName: item.saleName,
        mainName: item.mainName,
        status: item.status,
      };
      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();
    },
  },
  components: {
    Pagination,
  },
};
</script>

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