<template>
  <div class="app-container">
      <el-tabs v-model="activeName"    >
          <el-tab-pane label="客户管理配置" name="sysConfig">
          <el-form ref="sysConfig" :model="sysConfig" label-width="120px">
            <el-form-item label="公海回收规则">
                <el-row>
                    <el-input-number  v-model="sysConfig.visitLimt"  :min="0" :max="100" ></el-input-number>
                </el-row>
                <el-row>
                    <span class="tip">认领后N天自动回收</span>
                </el-row>
            </el-form-item>
            <div class="line"></div>
            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmit1">提交</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="企微客服配置" name="qwkfConfig">
          <el-form ref="qwkfConfig" :model="qwkfConfig" label-width="120px">
            <el-form-item label="企业CoripID">
              <el-input v-model="qwkfConfig.corpId" style="width:400px"   ></el-input>
            </el-form-item>
            <el-form-item label="Secret">
              <el-input v-model="qwkfConfig.secret" style="width:400px"   ></el-input>
            </el-form-item>
            <el-form-item label="Token">
              <el-input v-model="qwkfConfig.token" style="width:400px"   ></el-input>
            </el-form-item>
            <el-form-item label="EncodingAESKey">
              <el-input v-model="qwkfConfig.encodingAESKey" style="width:400px"   ></el-input>
            </el-form-item>
            <el-form-item label="回调地接">
              <el-input disabled v-model="qwkfConfig.notifyUrl" style="width:600px"   ></el-input>
            </el-form-item>
            <div class="line"></div>
            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmit3">提交</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane  label="客户字段配置" name="customerExt">
          <el-row :gutter="10" class="mb8" style="margin:0px 0px 10px;">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleCustomerExtAdd"
              >新增</el-button>
            </el-col>
          </el-row>
          <el-table border :data="customerExtList" >
            <el-table-column label="ID" align="center" prop="extId" />
            <el-table-column label="字段名称" align="center" prop="name" />
            <el-table-column  label="状态" align="center" prop="status">
              <template slot-scope="scope">
                  <el-tag prop="status" v-for="(item, index) in statusOptions"    v-if="scope.row.status==item.dictValue">{{item.dictLabel}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="排序号" align="center" prop="sort" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleCustomerExtUpdate(scope.row)"
                >修改</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleCustomerExtDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="line"></div>
            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmit2">提交</el-button>
            </div>
        </el-tab-pane>
      </el-tabs>

      <el-dialog :title="customerExt.title" :visible.sync="customerExt.open" width="500px" append-to-body>
        <el-form ref="customerExtForm" :model="customerExtForm" :rules="customerExtRules" label-width="80px">
          <el-form-item label="字段名称" prop="name">
            <el-input v-model="customerExtForm.name" placeholder="请输入字段名称" />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="customerExtForm.status">
              <el-radio label="1"  >正常</el-radio>
              <el-radio label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序号" prop="sort">
            <el-input-number v-model="customerExtForm.sort" :min="1" placeholder="请输入排序号" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCustomerExtForm">确 定</el-button>
          <el-button @click="customerExt.open=false">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCompanyInfo } from "@/api/company/company";
import { getConfigKey,updateConfig } from "@/api/company/companyConfig";
import { listCustomerExt, getCustomerExt, delCustomerExt, addCustomerExt, updateCustomerExt } from "@/api/crm/customerExt";

export default {
  name: "config",
  data() {
    return {
      company:null,
      statusOptions:[],
      customerExt:{
        open:false,
        title:"扩展字段"
      },
      customerExtForm:{
        name:"",
        status:"1",
        sort:"1",
      },
      customerExtRules:{

      },
      customerExtList: [],
      activeName: 'sysConfig',
      customerConfig:{
          rlLimit: 1,
          txLimit: 1,
          hsLimit: 1
      },
      sysConfig:{
          tel:"18900000000",
          noticeType:1,
          visitLimt:0,
          contractLimt:0
      },
      sysConfigForm:{},
      customerConfigForm:{},
      qwkfConfig:{

      },
      qwConfig:{

      },
      qwConfigForm:{},
      qwkfConfigForm:{},
    };
  },
  created() {
    this.getCompanyInfo();
    this.getConfigKey("sys:config");
    this.getConfigKey("qw:config");
    this.getConfigKey("customer:config");
    this.getDicts("sys_company_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getCustomerExt()
  },
  mounted() {

  },
  methods: {
    getCompanyInfo(){
      getCompanyInfo().then(response => {
        this.company = response.data;
      });
    },
    /** 新增按钮操作 */
    handleCustomerExtAdd() {
      this.customerExt.open = true;
      this.customerExt.title = "添加客户字段";
      this.customerExtForm={
        name:"",
        status:"1",
        sort:"1",
      }
    },
    /** 修改按钮操作 */
    handleCustomerExtUpdate(row) {
      const extId = row.extId
      getCustomerExt(extId).then(response => {
        this.customerExtForm = response.data;
        this.customerExt.open = true;
        this.customerExtForm.status = response.data.status.toString();
        this.customerExt.title = "修改客户字段";
      });
    },
    /** 提交按钮 */
    submitCustomerExtForm() {
      this.$refs["customerExtForm"].validate(valid => {
        if (valid) {
          if (this.customerExtForm.extId != null) {
            updateCustomerExt(this.customerExtForm).then(response => {
              if (response.code === 200) {
                this.getCustomerExt("修改成功");
                this.customerExt.open = false;
                this.getList();
              }
            });
          } else {
            addCustomerExt(this.customerExtForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.customerExt.open = false;
                this.getCustomerExt();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleCustomerExtDelete(row) {
      const extIds = row.extId || this.ids;
      this.$confirm('是否确认删除客户字段扩展编号为"' + extIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delCustomerExt(extIds);
        }).then(() => {
          this.getCustomerExt();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    getCustomerExt() {
      var data={}
      listCustomerExt(data).then(response => {
        this.customerExtList = response.data;
      });
    },
    getConfigKey(key){
        getConfigKey(key).then((response) => {
            if(key=="sys:config"){
                this.sysConfigForm=response.data;
                if(response.data.configValue!=null){
                    this.sysConfig=JSON.parse(response.data.configValue);
                }
            }
            else if(key=="qw:config"){
                this.qwkfConfigForm=response.data;
                if(response.data.configValue!=null){
                    this.qwkfConfig=JSON.parse(response.data.configValue);
                    this.qwkfConfig.notifyUrl="http://kf.qw.ifeiyu100.com/app/common/weixinkfAuth/"+this.company.companyId;
                }
            }
            else if(key=="customer:config"){
                this.customerConfigForm=response.data;
                if(response.data.configValue!=null){
                    this.customerConfig=JSON.parse(response.data.configValue);
                }
            }

        });
    },
    onSubmit1() {
      this.sysConfigForm.configValue=JSON.stringify(this.sysConfig);
      updateConfig(this.sysConfigForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("sys:config");
        }
      });
    },
    onSubmit2() {
      this.customerConfigForm.configValue=JSON.stringify(this.customerConfig);
      updateConfig(this.customerConfigForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("customer:config");
        }
      });
    },
    onSubmit3() {
      this.qwkfConfigForm.configValue=JSON.stringify(this.qwkfConfig);
      updateConfig(this.qwkfConfigForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("sys:config");
        }
      });
    },
  }
};
</script>
<style scoped lang="scss">
.tip{
  color:indianred;
}
.line{
  margin: 10px 0;
  background-color:gainsboro;
  height:1px;
}
.el-row {
  margin-bottom: 0px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>

