<template>
  <div v-loading="loading" class="addGuide">
    <div class="head-title">
      <span @click="CommonJump('directorGuideList')" class="blue point">导游管理</span> / 编辑导游管理
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:50%">

        <el-form-item label="导游名称" prop="Name" class="is-required">
          <el-input v-model="addMsg.Name" size="small" placeholder="请输入站点名称" />
        </el-form-item>

        <el-form-item label="用户头像" size="small">
            <el-tooltip class="item" effect="dark" content="建议尺寸100*100" placement="top">
              <el-button @click="openChangeDig(1)">选择文件</el-button>
            </el-tooltip>
            <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
              <img v-if="!addMsg.GuidePhoto || addMsg.GuidePhoto==''"
                   src="../../assets/img/default.png" style="width:80px;height:80px" alt="">
              <img v-else style="width:80px;height:80px" :src="addMsg.GuidePhoto"
                   alt="">
            </div>
        </el-form-item>

        <el-form-item label="工作年限" prop="WorkYears" class="is-required" size="small">
          <el-input v-model="addMsg.WorkYears" @keyup.native="checkPrice(addMsg,'WorkYears')" placeholder="请输入工作年限">
            <template slot="append">年</template>
          </el-input>
        </el-form-item>
        <el-form-item label="站点" prop="SiteId" class="is-required">
          <el-select class="w120"  v-model="addMsg.SiteId" size="small"
                     placeholder="请选择">
            <el-option v-for="item in CarSiteList" :key="item.ID" :label="item.SiteName" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="Telephone" class="is-required" size="small">
          <el-input v-model="addMsg.Telephone" placeholder="请输入联系电话" type="number"/>
        </el-form-item>
        <el-form-item label="紧急联系电话" prop="EmergencyPhone" class="is-required" size="small">
          <el-input v-model="addMsg.EmergencyPhone" placeholder="请输入紧急联系电话" type="number"/>
        </el-form-item>
        <el-form-item label="简介">
          <UE style="width:750px;" :defaultMsg="defaultMsg" :config="config" :IsMultiple="true" ref="ue"></UE>
        </el-form-item>

      </el-form>
    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>

    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg  @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>

</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import UE from "@/components/global/UE.vue";

  export default {
    components: {
      ChooseImg,
      UE,
    },
    data() {
      return {
        addMsg: {
          ID: 0,
          Name:'',
          GuidePhoto:'',
          WorkYears:0,
          SiteId:'',
          Telephone:'',
          EmergencyPhone:'',
          Introduction:'',
        },
        defaultMsg: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        rules: {

          Name: [{
            required: true,
            message: '请输入导游名称',
            trigger: 'blur'
          }],
          WorkYears: [{
            required: true,
            message: '请输入工作年限名称',
            trigger: 'blur'
          }],
          Telephone: [{
            required: true,
            message: '请输入联系电话名称',
            trigger: 'blur'
          }],
          EmergencyPhone: [{
            required: true,
            message: '请输入紧急联系电话名称',
            trigger: 'blur'
          }],

        },
        loading: false,
        CarSiteList:[],
        changeState:false,
        imgType:0,
      };
    },
    created() {

      if(this.$route.query.ID){
        this.getData(this.$route.query.ID)
      }
      this.getAllGuideCarSiteList()//获取站点下拉
    },
    methods: {

      SelectId(msg){
        if(this.imgType==1){
          let url  = this.getIconLink(msg.url)
          this.addMsg.GuidePhoto = url
        }

        this.changeState = false;
      },
      openChangeDig(num) {
        this.changeState = true;
        this.imgType=num;
      },
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.addMsg.GuidePhoto==''){
              this.Error('请上传头像')
              return false
            }
            if(this.addMsg.teId==''){
              this.Error('请选择站点')
              return false
            }
            let content = this.$refs.ue.getUEContent();
            this.addMsg.Introduction = content;
            this.apipost("/api/GuideCar/AddOrUpdateGuideCarGuide", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('directorGuideList');
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },
      getAllGuideCarSiteList(){
        this.apipost("/api/GuideCar/GetAllGuideCarSiteList", {}, res => {
          if (res.data.resultCode == 1) {
            this.CarSiteList = res.data.data
          } else {
            this.Error(res.data.message);
          }
        })
      },



      getData(ID) {
        this.loading = true;
        this.apipost("/api/GuideCar/GetGuideCarGuideModel", {
          ID: ID
        }, res => {
          this.loading = false;
          this.addMsg = res.data.data;
          if (this.addMsg.Introduction && this.addMsg.Introduction != "") {
            this.defaultMsg = this.addMsg.Introduction;
          }
        })
      }
    },
    mounted() {
    }
  };
</script>
<style>
  .app-add-cat .el-checkbox-group {
    font-size: 14px !important;
  }

  .app-add-cat .el-checkbox {
    margin-right: 0;
  }

  .app-add-cat .el-dialog__body {
    padding: 10px 20px !important;
  }

  .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
  }

  .app-add-cat .tag-box {
    margin: 20px 0;
  }

  .app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
  }

  .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
  }

  .app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
  }

  .addGuide .tip {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ff4544;
    background-color: #FEF0F0;
    padding: 0 20px;
    border-radius: 5px;
  }

  .addGuide .app-image {
    background-size: cover;
    background-position: center center;
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }

  .addGuide .setTable .el-table__body .cell {
    display: flex;
    align-items: center;

  }

  .addGuide .commonLabel .el-form-item__label {
    margin-top: -4px;
  }

  .addGuide .discount .el-form-item__label {
    padding-right: 30px;
    margin-top: -4px;
  }

  .addGuide .el-form-item .elzk {
    position: absolute;
    left: -25px;
    top: 8px;
  }

  .addGuide .el-form-item {
    position: relative;
  }

  .addGuide .blue {
    color: #409EFF;

  }

  .addGuide .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
  .addGuide .gez_list{
    width: 650px;
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

  }
  .addGuide .quyu{
    background-color: #f4f4f5;
    color: #909399;
    padding: 10px;
    line-height: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 5px;
  }
  .addGuide .imgstyle{
    width: 32px;
    height: 32px;
    margin: 0 5px;
  }
  </style>
