<template>
<div>
    <el-dialog 
    :title="manageObj.title"
    center
    append-to-body
    :visible.sync="manageObj.show"
    width="800px">
         <div class="head clear-both">
            <el-button @click="add" plain type="primary" style="float: right" v-if="!$store.state.readonly">新增来源码类别</el-button>
         </div>
          <el-table
      :data="sourceTypeList"
      style="width: 100%">
      <el-table-column
        prop="desc"
        label="描述">
      </el-table-column>
      <el-table-column
        prop="value"
        label="类别">
      </el-table-column>
        <el-table-column
        prop="created_at"
        label="创建时间">
      </el-table-column>
       <el-table-column
        width="250"
        v-if="!$store.state.readonly"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain type="warning" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" plain type="danger" @click="del(scope.row)" v-if="$store.state.deletePermission">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-dialog>
    <el-dialog
    :title="addTypeObj.title"
    center
    append-to-body
    :visible.sync="addTypeObj.show"
    width="800px">
    <el-form ref="form" :model="form" :rules="rules" >
        <el-row>
          <el-col :span="4"><label>来源码类别</label></el-col>
          <el-col :span="8">
            <el-form-item  prop="value">
              <el-input v-model="form.value"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><label>描述</label></el-col>
          <el-col :span="8">
            <el-form-item  prop="desc">
              <el-input v-model="form.desc" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addTypeObj.show = false">取 消</el-button>
            <el-button type="primary" @click="sub">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>
<script>
import {getConfigListApi,saveConfigApi,updateConfigApi,deleteConfigApi ,getConfigDetailApi} from "../../service/api"
export default {
    name:"manageDialog",
    props:[
        "manageObj"
    ],
    data(){
        return{
            sourceTypeList:[],
            addTypeObj:{
                title:"来源码类别",
                show:false,
            },
            form:{
                value:'',
                desc:'',
                id:''
            },
             rules:{
          value:[
            { required: true, message: '请输入类别', trigger: 'change' }
          ],
          desc:[
            { message: '请输入描述', trigger: 'change' }
          ]
        }
        }
    },
    methods:{
        sub(){
            let json={
                value:this.form.value,
                key:"code_rule_type"
            }
            if(this.form.desc){
                json.desc=this.form.desc
            }
           if(this.form.id){
          this.$refs['form'].validate((valid) => {
            if(valid){
              this.$confirm('此操作将修改来源码?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                updateConfigApi(this.form.id,json).then(res=>{
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  });
                 this.addTypeObj.show = false;
                 this.sourceTypeOptions();
                })
              })
            }
          });
        }else{
          this.$refs['form'].validate((valid) => {
            if(valid){
              this.$confirm('此操作将新增来源码?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                saveConfigApi(json).then(res=>{
                  this.$message({
                    type: 'success',
                    message: '新增成功!'
                  });
                this.addTypeObj.show = false;
                this.sourceTypeOptions();
                })
              })
            }
          });
        }
        },
        add(){
                this.form.id = '';
                this.form.value = '';
                this.form.desc = '';
                this.addTypeObj.show=true;
        },
         sourceTypeOptions(){
            let json={
          limit: 2000,
          page: 1,
          key:"code_rule_type",
        };
          getConfigListApi(json).then(res => {
            this.sourceTypeList=res.list
        })
        },
         del(data){
        this.$confirm('此操作将删除该记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteConfigApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.sourceTypeOptions()
          });
        });
      },
       edit(data){
        getConfigDetailApi(data.id).then((res) => {
          this.addTypeObj.show = true
          this.form.id = res.id;
          this.form.value = res.value;
          this.form.desc = res.desc;
        });
      },
    },
    mounted(){
    },
    watch:{
        "manageObj.show"(val){
            if(val){
             this.sourceTypeOptions();
            }else{
                 this.$emit("reflash");
            }
        }
    }
}
</script>
<style scoped>

</style>