<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <t-button @click="add">新增类别</t-button>
      <t-table
        rowKey="index"
        :data="list"
        :columns="columns"
        :stripe="false"
        :bordered="false"
        :hover="true"
        size="large"
        table-layout="auto"
        cellEmptyContent="-"
      >
        <template #select="{ row }">
          <t-space size="24px" v-if="row.id!=0">
            <t-button theme="warning" @click="edit(row)">编辑</t-button>
            <t-popconfirm  content="确认删除吗，行业下的会员将归类为：其他行业" @confirm="del(row)">
              <t-button theme="danger" >删除</t-button>
            </t-popconfirm>
          </t-space>
        </template>
      </t-table>
    </div>
    <t-dialog :header="isEdit?'编辑类别':'新增类别'" :visible="addMode" :onClose="onCloseMy" @confirm="onSubmit">
      <t-form>
        <t-form-item label="类别名称" name="name">
          <t-input placeholder="请输入行业名称" v-model="industry_name"/>
        </t-form-item>
        <t-form-item label="类别排序" name="name">
          <t-input placeholder="请输入类别排序" type="number" v-model="industry_description"/>
        </t-form-item>
      </t-form>
    </t-dialog>
  </t-card>

</template>
<script lang="ts">
export default {
  data() {
    return {
      industry_description:'',
      industry_name: '',
      addMode: false,
      isEdit: false,
      editID:0,
      list: [],
      columns: [
        {colKey: 'industry_description', title: '排序'},
        {colKey: 'industry_name', title: '类别名称'},
        {colKey: 'select', title: '操作', width: 200},
      ],
    }
  },
  mounted() {
    //this.member_id=this.$route.query.id;
    //this.getList();
  },
  methods: {
    del(d){
      console.log(d);
      this.$request
        .post('/industry/del',{id:d.id})
        .then((res) => {
          if(res.code==1){
            this.$message.success(res.msg);
            this.getList();
          }else {
            this.$message.error(res.msg);
          }
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    add(){
      this.industry_description='';
      this.industry_name= '';
      this.addMode=true;
      this.isEdit=false;
    },
    edit(d){
      this.editID=d.id;
      this.industry_name=d.industry_name;
      this.industry_description=d.industry_description;
      this.addMode=true;
      this.isEdit=true;
    },
    getList() {
      this.$request
        .post("/industry")
        .then((res) => {
          console.log(res);
          this.list = res.data;
          this.list.push({id:-1,industry_name:'其他行业'});
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onSubmit() {
      if (this.industry_name == '') {
        this.$message.error('行业名称不能为空');
        return;
      }
      var url='/industry/add';
      if(this.isEdit){
        url='/industry/update';
      }
      this.$request
        .post(url,{industry_name:this.industry_name,industry_description:this.industry_description,id:this.editID})
        .then((res) => {
          if(res.code==1){
            this.$message.success(res.msg);
            this.addMode=false;
            this.getList();
          }else {
            this.$message.error(res.msg);
          }
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onCloseMy() {
      this.addMode = false;
    }
  }
}
</script>
<style scoped lang="less">

</style>
