<template>
  <div class="container">
    <div class="search-form">
      <el-button type="success" size="small" plain icon="el-icon-plus" @click="add">新增</el-button>
    </div>
    <div class="table-form">
      <el-table :data="dataList" size="mini" style="width: 100%">
        <el-table-column prop="contract_number" label="合同协议编号"></el-table-column>
        <el-table-column prop="contract_name" label="合同协议名称"></el-table-column>
        <el-table-column prop="contract_type" label="类型">
          <template slot-scope="scope">
            <div v-if="scope.row.contract_type == 0">用户协议</div>
            <div v-if="scope.row.contract_type == 1">正式课合同</div>
          </template>
        </el-table-column>
        <el-table-column prop="goods_name" label="关联商品">
          <template slot-scope="scope">
            <div v-for="data in goodsNameFilter(scope.row.goods_name)">{{data}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间"></el-table-column>
        <el-table-column prop="updated_at" label="最后编辑时间"></el-table-column>
        <el-table-column prop="operator" label="最后编辑人"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">启用</div>
            <div v-if="scope.row.status == 1">停用</div>
          </template>
        </el-table-column>
        <el-table-column width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain @click="edit(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status == 0" type="warning" size="mini" plain @click="switchStatus(scope.row)">
              停用
            </el-button>
            <el-button v-if="scope.row.status == 1" type="success" size="mini" plain @click="switchStatus(scope.row)">
              启用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <dialog-com :dialogObj="dialogObj" @reflash="getDataList"/>
  </div>
</template>

<script>
    import {contractListApi, contractSwitchstatusApi} from "../../service/api";
    import dialogCom from './dialog';

    export default {
        name: "index",
        data() {
            return {
                dataList: [],
                dialogObj: {
                    type: 0,
                    show: false,
                    id: '',
                    title: ''
                }
            }
        },
        components: {
            dialogCom
        },
        methods: {
            getDataList() {
                contractListApi().then(res => {
                    this.dataList = res;
                });
            },
            goodsNameFilter(val) {
                if (val) {
                    return val.split('--')
                }
            },
            add() {
                this.dialogObj = {
                    type: 0,
                    show: true,
                    id: '',
                    title: '新增合同协议'
                }
            },
            edit(data) {
                this.dialogObj = {
                    type: 1,
                    show: true,
                    id: data.id,
                    title: '编辑合同协议',
                    contract_name: data.contract_name,
                    contract_type: data.contract_type,
                    goods_ids: data.goods_ids,
                    contract_text: data.contract_text
                }
            },
            switchStatus(data) {
                let json = {
                    status: data.status
                };
                if (data.status == 0) {
                    json.status = 1;
                }
                if (data.status == 1) {
                    json.status = 0;
                }
                contractSwitchstatusApi(data.id, json).then(res => {
                    if (json.status == 0) {
                        this.$confirm('此操作将启用合同?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$message({
                                type: 'success',
                                message: '启用成功'
                            });
                            this.getDataList();
                        }).catch(() => {
                        });
                    }
                    if (json.status == 1) {
                        this.$confirm('此操作将停用合同?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$message({
                                type: 'success',
                                message: '停用成功'
                            });
                            this.getDataList();
                        }).catch(() => {
                        });
                    }
                });
            },

        },
        created() {
            this.getDataList();
        }
    }
</script>

<style scoped>
  .container {
    padding: 20px;
  }

  .search-form {
    margin-bottom: 20px;
  }
</style>