<style>
  .director_Main {
    display: flex;
  }

  .director_mobile_box {
    width: 400px;
    height: 600px;
    background-color: #fff;
    border-radius: 30px;
    margin-right: 20px;
    border: 1px solid #e2e3e3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .director_bg_box {
    position: relative;
    width: 399px;
  }

  .director_formBody {
    background-color: #fff;
    margin-bottom: 20px;
    width: 100%;
    height: 100%;
    position: relative;
    min-width: 640px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .directorShareBtn {
    position: absolute !important;
    bottom: -52px;
    left: 0;
  }

  .directorSetting .dirBackground {
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }

  .directorSetting .dirBackground img {
    width: 100%;
    height: 100%;
  }

  .directorSetting .img-edge-cover {
    width: 100%;
    position: relative;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
  }

  .directorSetting .dir_head {
    width: 100%;
    height: 270px;
  }

  .directorSetting .dir_Content {
    width: 90%;
    height: 400px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px #f7e3e3;
    position: absolute;
    top: 170px;
    left: 20px;
    padding: 20px;
  }

  .directorSetting .dir_comItem {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E2E2E2;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }

  .directorSetting .dir_normal {
    font-size: 12px;
    color: #929292;
    margin-bottom: 15px;
  }

  .directorSetting .dir_big {
    font-size: 14px;
    color: #1C1E1F;
    font-weight: bold;
  }

  .directorSetting .dir_chaochu {
    white-space: nowrap;
    width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .directorSetting .dir_Button {
    width: 100%;
    height: 44px;
    border-radius: 22px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 44px;
    margin-top: 20px;
  }

</style>
<template>
  <div v-loading="loading" class="directorSetting">
    <div class="head-title">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础设置" name="1"></el-tab-pane>
        <el-tab-pane label="司导设置" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="content">
      <template v-if="activeName=='1'">
        <el-form :model="addMsg" ref="addMsg" label-width="160px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>司导设置</span>
            </div>
            <div>
              <el-form-item label="订单状态">
                <div flex="dir:left wrap:wrap">
                  <div v-for="item in addMsg.OrderStateList" :key="item.Id" style="margin-right: 15px" flex="dir:left">
                    <span>{{item.Id}}：</span>
                    <el-input style="width:100px" placeholder="请输入" size="small" v-model="item.Name"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="是否需二次确认">
                <el-radio v-model="addMsg.IsConfirm" :label="1">是</el-radio>
                <el-radio v-model="addMsg.IsConfirm" :label="2">否</el-radio>
              </el-form-item>
              <el-form-item label="详情页面链接">
                <el-input style="width:350px" placeholder="请输入" size="small" v-model="addMsg.PagePath">
                  <el-button slot="append" @click="isShowLink=true">选择链接</el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="提前预定天数">
                <el-input style="width:350px" placeholder="请输入" size="small" v-model="addMsg.AdvanceDay">
                  <el-button slot="append">
                    <span>天</span>
                  </el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="提前取消的时间">
                <el-input style="width:350px" placeholder="请输入" size="small" v-model="addMsg.CancelHour">
                  <el-button slot="append">
                    <span>小时</span>
                  </el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="保险名称">
                <el-input style="width:350px" placeholder="请输入" size="small" v-model="addMsg.InsuranceName"></el-input>
              </el-form-item>
              <el-form-item label="成本价格">
                <el-input style="width:350px" type="number" min="0" placeholder="请输入" size="small"
                  v-model="addMsg.CostPrice">
                  <el-button slot="append">
                    <span>元</span>
                  </el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="销售价格">
                <el-input style="width:350px" type="number" min="0" placeholder="请输入" size="small"
                  v-model="addMsg.SalePrice">
                  <el-button slot="append">
                    <span>元</span>
                  </el-button>
                </el-input>
              </el-form-item>

            </div>
          </el-card>
          <el-card style="margin-top:20px" shadow="never">
            <div slot="header" class="clearfix">
              <span>保险描述</span>
            </div>
            <el-row>
              <el-col :span="242">
                <UE style="width:750px;" :defaultMsg="defaultMsg" :config="config" :IsMultiple="true" ref="ue"></UE>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
        <div style="margin-top:20px">
          <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
        </div>
      </template>
      <template v-else>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>司导设置</span>
          </div>
          <div>
            <div class="director_Main">
              <div class="director_mobile_box">
                <div class="director_bg_box">
                  <div class="img-edge-cover">
                    <img class="dir_head" :src="dirMsg.Background" alt="" />
                  </div>
                  <div class="dir_Content">
                    <div class="dir_comItem">
                      <div v-if="dirMsg.IsShowCity==1">
                        <div class="dir_normal">取车城市</div>
                        <div class="dir_big">成都</div>
                      </div>
                      <div style="width:145px;" v-if="dirMsg.IsShowAddress==1">
                        <div class="dir_normal">接送位置</div>
                        <div class="dir_big dir_chaochu">锦江区阳光新业2号楼2302</div>
                      </div>
                      <div style="width:48px;">
                        <template v-if="dirMsg.IsShowCarpooling==1">
                          <div class="dir_normal">是否拼车</div>
                          <el-switch active-value="100" inactive-value="0">
                          </el-switch>
                        </template>
                      </div>
                    </div>
                    <div class="dir_comItem">
                      <div style="width:48px;">
                        <template v-if="dirMsg.IsShowGuideCarGoodsType==1">
                          <div class="dir_normal">出行类型</div>
                          <div class="dir_big">接机</div>
                        </template>
                      </div>
                      <div style="width:145px;text-align:center;">
                        <template v-if="dirMsg.IsShowCarClass==1">
                          <div class="dir_normal">车辆类型</div>
                          <div class="dir_big">跑车</div>
                        </template>
                      </div>
                      <div style="width:48px;">
                        <template v-if="dirMsg.IsShowTravelGuestNum==1">
                          <div class="dir_normal">出行人数</div>
                          <div class="dir_big">5</div>
                        </template>
                      </div>
                    </div>
                    <div class="dir_comItem" v-if="dirMsg.IsShowDate==1">
                      <div>
                        <div class="dir_big" style="margin-bottom:15px;">09月01日</div>
                        <div class="dir_normal">周二 20:30</div>
                      </div>
                      <div style="width:145px;text-align:center;">
                        <div class="dir_normal" style="margin:15px 0 0 0;">2天</div>
                        <img :src="domainManager().ImageUrl + '/Static/dir_arrow.png'" />
                      </div>
                      <div>
                        <div class="dir_big" style="margin-bottom:15px;">09月03日</div>
                        <div class="dir_normal">周二 20:30</div>
                      </div>
                    </div>
                    <div class="dir_bottom">
                      <div style="display:flex;align-items:center;">
                        <img style="width:13px;height:10px;margin-right:5px;" :src="dirMsg.TipsIco" alt="" />
                        <span style="color:#121212;font-size:12px;">{{dirMsg.Tips}}</span>
                      </div>
                      <div class="dir_Button"
                        :style="{'background':dirMsg.ButtonColor,'color':dirMsg.ButtonTextColor,'borderRadius':dirMsg.ButtonFilletPX+'px'}">
                        {{dirMsg.ButtonText}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="director_formBody">
                <el-form label-width="150px">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="背景图片" size="small">
                        <div>
                          <el-tooltip class="item" effect="dark" content="建议尺寸:750*300" placement="top-start">
                            <el-button size="mini" @click="choicImg=true,imgType=1">选择文件</el-button>
                          </el-tooltip>
                        </div>
                        <div class="dirBackground">
                          <img v-if="dirMsg.Background" :src="dirMsg.Background" alt="" />
                          <img v-else src="../../assets/img/default.png" alt="" />
                        </div>
                      </el-form-item>
                      <el-form-item label="图标提示" size="small">
                        <div>
                          <el-tooltip class="item" effect="dark" content="建议尺寸:13*10" placement="top-start">
                            <el-button size="mini" @click="choicImg=true,imgType=2">选择文件</el-button>
                          </el-tooltip>
                        </div>
                        <div class="dirBackground">
                          <img v-if="dirMsg.TipsIco" :src="dirMsg.TipsIco" alt="" />
                          <img v-else :src="domainManager().ImageUrl + '/Static/dir_icon.png'" alt="" />
                        </div>
                      </el-form-item>
                      <el-form-item label="显示时间筛选" size="small">
                        <el-switch v-model="dirMsg.IsShowDate" :active-value="1" :inactive-value="0">
                        </el-switch>
                      </el-form-item>
                      <el-form-item label="显示地址" size="small">
                        <el-switch v-model="dirMsg.IsShowAddress" :active-value="1" :inactive-value="0">
                        </el-switch>
                      </el-form-item>
                      <el-form-item label="显示出行类型" size="small">
                        <el-switch v-model="dirMsg.IsShowGuideCarGoodsType" :active-value="1" :inactive-value="0">
                        </el-switch>
                      </el-form-item>
                      <el-form-item label="显示出行人数" size="small">
                        <el-switch v-model="dirMsg.IsShowTravelGuestNum" :active-value="1" :inactive-value="0">
                        </el-switch>
                      </el-form-item>

                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="文字提示" size="small">
                        <el-input v-model="dirMsg.Tips"></el-input>
                      </el-form-item>
                      <el-form-item label="按钮文本" size="small">
                        <el-input v-model="dirMsg.ButtonText"></el-input>
                      </el-form-item>
                      <el-form-item label="按钮圆角" size="small">
                        <el-input type="number" v-model="dirMsg.ButtonFilletPX"></el-input>
                      </el-form-item>
                      <el-form-item label="按钮文字颜色" size="small">
                        <el-color-picker v-model="dirMsg.ButtonTextColor"></el-color-picker>
                      </el-form-item>
                      <el-form-item label="按钮颜色" size="small">
                        <el-color-picker v-model="dirMsg.ButtonColor"></el-color-picker>
                      </el-form-item>
                      <el-form-item label="显示城市" size="small">
                        <el-switch v-model="dirMsg.IsShowCity" :active-value="1" :inactive-value="0">
                        </el-switch>
                      </el-form-item>
                      <el-form-item label="显示是否拼车" size="small">
                        <el-switch v-model="dirMsg.IsShowCarpooling" :active-value="1" :inactive-value="0">
                        </el-switch>
                      </el-form-item>
                      <el-form-item label="显示车辆类型" size="small">
                        <el-switch v-model="dirMsg.IsShowCarClass" :active-value="1" :inactive-value="0">
                        </el-switch>
                      </el-form-item>
                    </el-col>
                  </el-row>

                </el-form>
              </div>
            </div>
          </div>
        </el-card>
        <div style="margin-top:20px">
          <el-button size="small" type="primary" @click="setConfigInfo">保存</el-button>
        </div>
      </template>
    </div>
    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
      <chooseMenu ref="chooseMenu">
      </chooseMenu>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowLink=false">取 消</el-button>
        <el-button size="small" type="danger" @click="getMenu()" :v-loading="saveload">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import chooseMenu from "../common/chooseMenu.vue";
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import UE from "@/components/global/UE.vue";

  export default {
    components: {
      chooseMenu,
      UE,
      ChooseImg
    },
    data() {

      return {
        loading: false,
        isShowLink: false,
        saveload: false,
        addMsg: {},
        SettlementType: [],
        WithdrawWayList: [],
        dialogVisible: false,
        getGradeByTypeList: [],
        defaultMsg: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        activeName: '1', //用于切换
        dirMsg: {
          Background: this.domainManager().ImageUrl + '/Static/dir_topBg.png', //背景
          SearchBackground: '', //搜索背景
          SearchTips: '', //搜索框文字
          Tips: '每辆车都会配备一名专业导游，方便游客出行', //	按钮上面的文字提示
          TipsIco: this.domainManager().ImageUrl + '/Static/dir_icon.png', //	按钮上面的文字图标提示
          ButtonTextColor: '#fff', //按钮文本颜色
          ButtonText: '去订车', //	按钮文本
          ButtonColor: '#FF4048', //按钮颜色
          IsShowDate: 1, //	是否显示时间筛选0-否，1-是
          IsShowCity: 1, // 是否显示城市筛选0-否，1-是
          IsShowAddress: 1, //是否显示地址筛选0-否，1-是
          IsShowCarpooling: 1, //是否显示拼车筛选0-否，1-是
          IsShowGuideCarGoodsType: 1, //	是否显示出行类型筛选0-否，1-是
          IsShowCarClass: 1, //是否显示车辆类型筛选0-否，1-是
          IsShowTravelGuestNum: 1, //是否显示出行人数筛选0-否，1-是
          ButtonFilletPX: 0 // 按钮圆角像素
        },
        choicImg: false,
        imgType: -1,
      };
    },
    created() {

      this.getData();
      this.getConfig();
    },
    methods: {
      getGradeByType(num) {
        this.apipost("/api/user/GetGradeByType", {
          GradeType: num
        }, res => {
          if (res.data.resultCode == 1) {
            this.getGradeByTypeList = res.data.data;
          }
        })
      },
      getMenu() {
        //调用子组件方法
        var obj = this.$refs.chooseMenu.getChooseMenu();
        this.addMsg.PagePath = obj.PageUrl;
        this.isShowLink = false;
      },
      Save(formName) {
        if (this.addMsg.AdvanceDay == '' || this.addMsg.AdvanceDay < 1) {
          this.Error('提前预定天数不能小于1')
          return false
        }
        this.$refs[formName].validate((valid) => {

          if (valid) {
            let content = this.$refs.ue.getUEContent();
            this.addMsg.InsuranceDescription = content;
            let cmd = "/api/GuideCar/SetGuideCarInfo";
            this.saveload = true
            this.apipost(cmd, this.addMsg,
              res => {
                this.saveload = false

                if (res.data.resultCode === 1) {
                  this.Success(res.data.message);
                  this.getData();
                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },
      getData() {
        this.loading = true;
        this.apipost("/api/GuideCar/GetGuideCarInfo", {}, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
            if (this.addMsg.InsuranceDescription && this.addMsg.InsuranceDescription != "") {
              this.defaultMsg = this.addMsg.InsuranceDescription;
            }
          }
        })
      },
      //选择图片
      SelectId(msg) {
        if (this.imgType == 1) {
          this.dirMsg.Background = this.getIconLink(msg.url);
        }
        if (this.imgType == 2) {
          this.dirMsg.TipsIco = this.getIconLink(msg.url);
        }
        this.choicImg = false;
      },

      //获取配置信息
      getConfig() {
        this.apipost("/api/GuideCar/GetGuideCarSearchInfo", {}, res => {
          if (res.data.resultCode == 1) {
            this.dirMsg = res.data.data;
          }
        })
      },
      //保存修改参数
      setConfigInfo() {
        this.apipost("/api/GuideCar/SetGuideCarSearchInfo", this.dirMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
          }else{
            this.Error(res.data.message);
          }
        })
      }



    },
    mounted() {

    }
  };

</script>
<style>
  .directorSetting .app-gallery-item {
    width: 100px;
    height: 100px;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
  }

  .directorSetting .el-form-item .topelzk {
    top: 12px !important;
  }

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

  .directorSetting .el-checkbox-group {
    display: inline-block;
  }

  .directorSetting .nocommonLabel .el-form-item__label {
    margin-top: 0px;
    padding-right: 30px;
  }

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

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

  .directorSetting .blue {
    color: #409EFF;

  }

  .directorSetting .content {
    margin-top: 10px;
    box-sizing: border-box;
  }

</style>
