<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-form-item label="上架" prop="onState">
            <el-checkbox v-model="form.onState"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="排序" prop="rank">
            <el-input v-model="form.rank" placeholder="请输入排序" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="链接地址" prop="linkUrl">
            <el-input v-model="form.linkUrl" type="text" placeholder="请输入链接地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="简要说明" prop="brief">
            <el-input v-model="form.brief" 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="createFriendLink('form')">确 定</el-button>
      <el-button type="primary" v-if="title=='编辑'" @click="updateFriendLink('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, save} from "../../../api/officialWebsit/friendLink";
    export default {
        props: ["oneRow", "title","friendLinkDialogEvent"],
        name: 'friendLink',
        data() {
            return {
                BASE_API: process.env.BASE_API,
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 350
                },
                form: {
                    name:undefined, //名称
                    onState:undefined,  //上下架状态
                    rank:undefined,  //排序
                    linkUrl: undefined, //链接地址
                    brief: undefined  //简要说明
                },
                rules: {
                    name:{
                        type: 'string',
                        required: true,
                        message: '请输入名称',
                        trigger: 'blur'
                    },
                    linkUrl:{
                        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: {
            /**
             * 创建
             * */
            createFriendLink(formName){
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        let params = {
                            name:this.form.name,
                            onState: this.form.onState,
                            rank:this.form.rank,
                            linkUrl: this.form.linkUrl,
                            brief: this.form.brief
                        };
                        this.toCreate(params);
                    } else {
                        return;
                    }
                });
            },
            /**
             * 编辑
             * */
            updateFriendLink(formName){
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        let params = {
                            id:this.oneRow.id,
                            name:this.form.name,
                            onState: this.form.onState,
                            rank:this.form.rank,
                            linkUrl: this.form.linkUrl,
                            brief: this.form.brief
                        };
                        this.toUpdate(params);
                    } else {
                        return;
                    }
                });
            },
            /**
             * 更新
             * */
            toUpdate(params){
                save(params).then(response => {
                    if (response.status === 200) {
                        this.$notify({
                            title: '成功',
                            message: '编辑成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.$emit("friendLinkDialogEvent", true);
                    } else {
                        this.$notify({
                            title: '编辑失败',
                            message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                            type: 'error',
                            duration: 2000
                        });
                    }
                });
            },
            /**
             * 创建
             * */
            toCreate(params){
                save(params).then(response => {
                    if (response.status === 200) {
                        this.$notify({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.$emit("friendLinkDialogEvent", 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("friendLinkDialogEvent", false);
            },

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