<template>
  <!-- 友情：创建、编辑 -->
  <div class = "friendLink">
    <h4>{{title}}</h4>
    <el-form :model="form" :rules="rules" ref="form" label-width="90px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入客服名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="客服电话" prop="telphone">
            <el-input v-model="form.telphone" placeholder="请输入客服电话" type="number"  :readonly="title==='编辑'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" type="text"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" v-if="title=='创建'" @click="createCustomerService('form')">确 定</el-button>
      <el-button type="primary" v-if="title=='编辑'" @click="updateCustomerService('form')">确 定</el-button>
    </div>
  </div>
</template>
<style>
  textarea{
    display: none;
  }
  .el-upload-list li{
    margin-left: 10px;
  }
</style>
<script>
    import {
        getToken
    } from '../../../../utils/auth';
    import {findById,add} from "src/api/admin/userManagement/customerservice";
    export default {
        props: ["oneRow", "title","customerServiceDialogEvent"],
        name: 'customerservice',
        data() {
            return {
                BASE_API: process.env.BASE_API,
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 350
                },
                form: {
                    name:undefined, //名称
                    telphone:undefined, //客服电话
                    password: undefined
                },
                rules: {
                    telphone:{
                        type: 'string',
                        required: true,
                        message: '请输入客服电话',
                        trigger: 'blur'
                    }
                },
            }
        },
        mounted() {
            this.cleanForm();
            if(this.title === "编辑"){
                let row = this.oneRow;
                this.getOne(row.id);
            }
        },
        computed: {
            getHeaderWithToken() {
                return {Authorization: getToken()};
            },
        },
        methods: {
            /**
             * 创建
             * */
            createCustomerService(formName){
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        let params = {
                            name:this.form.name,
                            telphone: this.form.telphone,
                            password: this.form.password
                        };
                        this.toCreate(params);
                    } else {
                        return;
                    }
                });
            },
            /**
             * 编辑
             * */
            updateCustomerService(formName){
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        let params = {
                            id:this.oneRow.id,
                            name:this.form.name,
                            telphone: this.form.telphone,
                            password: this.form.password
                        };
                        this.toUpdate(params);
                    } else {
                        return;
                    }
                });
            },
            /**
             * 更新
             * */
            toUpdate(params){
                add(params).then(response => {
                    if (response.status === 200) {
                        this.$notify({
                            title: '成功',
                            message: '编辑成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.$emit("customerServiceDialogEvent", true);
                    } else {
                        this.$notify({
                            title: '编辑失败',
                            message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                            type: 'error',
                            duration: 2000
                        });
                    }
                });
            },
            /**
             * 创建
             * */
            toCreate(params){
                add(params).then(response => {
                    if (response.status === 200) {
                        this.$notify({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.$emit("customerServiceDialogEvent", true);
                    } else {
                        this.$notify({
                            title: '创建失败',
                            message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                            type: 'error',
                            duration: 2000
                        });
                    }
                });
            },
            /**
             * 获取一条营地
             * */
            getOne(id){
                findById(id).then(response => {
                    this.form = response.data;
                })
            },
            /**
             * 旅游-弹框-取消
             * */
            cancel() {
                this.cleanForm();
                this.$emit("customerServiceDialogEvent", false);
            },

            /**
             * 清空弹框数据
             */
            cleanForm() {
                this.form = {
                    name:undefined,
                    telphone: undefined,
                    password: undefined
                };
            }
        }
    }
</script>
