<style>
@import "../../../assets/css/font";
</style>
<template>
  <div>
    <div class="TravelNotice" :class="{'foldHeight':isFold==1}">
      <span class="TMTitle"><i></i>补充信息</span>
      <span class="foldList" @click="fold" v-if="isFold==''">点击折叠</span>
      <span class="foldList" @click="fold" v-if="isFold==1">点击展开</span>
      <div>
        <div class="TNtitle NotContain">
          费用包含
        </div>
        <my-edit v-on:edit-value="NoticeData.FeeInclude = arguments[0]" v-bind:editValue="NoticeData.FeeInclude"
                 v-bind:toolbarShow="toolbar" v-bind:referenceList="FreeIncludeArr"></my-edit>
        <div class="TNtitle NotContain">
          费用不含
        </div>
        <my-edit v-on:edit-value="NoticeData.FeeNonInclude = arguments[0]" v-bind:editValue="NoticeData.FeeNonInclude"
                 v-bind:toolbarShow="toolbar" v-bind:referenceList="FeeNonIncludeArr"></my-edit>

        <div class="TNtitle NotContain">
          自费安排
        </div>
        <table class="TFTable TNtable">
          <thead>
          <tr>
            <th>城市</th>
            <th>自费项目</th>
            <th>预计费用</th>
            <th>说明</th>
            <th width="100">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(selfItem,selfIndex) in SelfpayingAllList">
            <td>
              <span v-if="selfItem.IsShow==0">{{selfItem.CityName}}</span>
              <el-select class='w120' :placeholder="$t('pub.pleaseSel')" filterable v-model="selfItem.CityId"
                         v-else-if="selfItem.IsShow==1">
                <el-option :label="$t('pub.unlimitedSel')" :value='DefaultSelectValue'></el-option>
                <el-option v-for="item in AllCityList" :label='item.Name' :value='item.ID' :key='item.ID'>
                </el-option>
              </el-select>
            </td>
            <td>
              <span v-if="selfItem.IsShow==0">{{selfItem.ItemName}}</span>
              <el-input v-model="selfItem.ItemName" class='w200' v-else></el-input>
            </td>
            <td>
              <span v-if="selfItem.IsShow==0">{{selfItem.EstimatedCost}}</span>
              <el-input v-model="selfItem.EstimatedCost" class='w200'
                        v-else></el-input>
            </td>
            <td>
              <span v-if="selfItem.IsShow==0">{{selfItem.Explain}}</span>
              <el-input v-model="selfItem.Explain" class='w400' v-else></el-input>
            </td>
            <td>
              <el-tooltip class="item" effect="dark" content="修改" placement="top-start" v-if="(selfItem.IsShow==0)">
                <el-button type="primary" icon="el-icon-edit" circle @click="SelfpayingShow(selfItem)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="保存" placement="top-start" v-if="selfItem.IsShow==1">
                <el-button type="primary" icon="iconfont icon-baocun" circle
                           @click="SaveSelfpaying(selfItem)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="取消" placement="top-start" v-if="selfItem.IsShow==1 ">
                <el-button type="danger" icon="iconfont icon-guanbi" circle
                           @click="SelfpayingHide(selfItem,selfIndex)"></el-button>
              </el-tooltip>

              <el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="selfItem.IsShow==0">
                <el-button type="danger" icon="iconfont icon-guanbi" circle
                           @click="DelSelfpaying(selfItem,selfIndex)"></el-button>
              </el-tooltip>
            </td>
          </tr>
          </tbody>
          <tfoot>
          <tr>
            <td colspan="5">
              <div class="TFAddFlight" @click="AddSelfpaying()">
                <i class="iconfont icon-img_haha" @click="AddSelfpaying()"></i>
              </div>
            </td>
          </tr>
          </tfoot>
        </table>
        <div class="TNtitle NotContain">
          重要提示
        </div>
        <my-edit v-on:edit-value="NoticeData.ImportantTip = arguments[0]" v-bind:editValue="NoticeData.ImportantTip"
                 v-bind:toolbarShow="toolbar" v-bind:referenceList="ImportantTipArr"></my-edit>
        <div class="TNtitle NotContain">
          温馨提示
        </div>
        <my-edit v-on:edit-value="NoticeData.WarmTip = arguments[0]" v-bind:editValue="NoticeData.WarmTip"
                 v-bind:toolbarShow="toolbar" v-bind:referenceList="WarmTipArr"></my-edit>
        <div class="TNtitle NotContain">
          同行备注
        </div>
        <my-edit v-on:edit-value="NoticeData.B2BRemark = arguments[0]" v-bind:editValue="NoticeData.B2BRemark"
                 v-bind:toolbarShow="toolbar" v-bind:referenceList="B2BRemarkArr"></my-edit>
        <div class="TNtitle NotContain">
          购物店（补充协议书）
        </div>
        <my-edit v-on:edit-value="NoticeData.ShopRemark = arguments[0]" v-bind:editValue="NoticeData.ShopRemark"
                 v-bind:toolbarShow="toolbar" v-bind:referenceList="ShopRemarkArr"></my-edit>
        <div class="TNtitle NotContain">
          购物店安排
        </div>
        <table class="TFTable TNtable">
          <thead>
          <tr>
            <th>城市</th>
            <th>购物店名称</th>
            <th>参观时间</th>
            <th width='100'>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(shopItem,shopIndex) in ShopAllList">
            <td class='w250'>
              {{shopItem.CityName}}
            </td>
            <td>
              <span v-if="shopItem.IsShow==0">{{shopItem.ShopName}}</span>
              <el-select class='w250' :placeholder="$t('pub.pleaseSel')" filterable v-model="shopItem.ShopId" @visible-change="getShopItemList($event)" @change="GetCityName(shopItem.ShopId,shopItem)" v-else>
                <el-option :label="$t('pub.unlimitedSel')" :value='DefaultSelectValue'></el-option>
                <el-option v-for="item in ShopItemList" :label='item.Name' :value='item.ID' :key='item.ID'>
                </el-option>
              </el-select>
            </td>
            <td>
              <span v-if="shopItem.IsShow==0">{{shopItem.VisitTime}}</span>
              <el-input v-model="shopItem.VisitTime" class='w400' v-else></el-input>
            </td>
            <td>
              <el-tooltip class="item" effect="dark" content="修改" placement="top-start" v-if="(shopItem.IsShow==0)">
                <el-button type="primary" icon="el-icon-edit" circle @click="ShopShow(shopItem)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="保存" placement="top-start" v-if="shopItem.IsShow==1">
                <el-button type="primary" icon="iconfont icon-baocun" circle @click="SaveShop(shopItem)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="取消" placement="top-start" v-if="shopItem.IsShow==1 ">
                <el-button type="danger" icon="iconfont icon-guanbi" circle @click="ShopHide(shopItem,shopIndex)"></el-button>
              </el-tooltip>

              <el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="shopItem.IsShow==0">
                <el-button type="danger" icon="iconfont icon-guanbi" circle
                           @click="DelShop(shopItem,shopIndex)"></el-button>
              </el-tooltip>
            </td>
          </tr>
          </tbody>
          <tfoot>
          <tr>
            <td colspan="4">
              <div class="TFAddFlight" @click="AddShop()">
                <i class="iconfont icon-img_haha"></i>
              </div>
            </td>
          </tr>
          </tfoot>
        </table>
        <div class="TNtitle NotContain">
          签证说明
        </div>
        <my-edit v-on:edit-value="NoticeData.VisaRemark = arguments[0]" v-bind:editValue="NoticeData.VisaRemark"
                 v-bind:toolbarShow="toolbar" v-bind:referenceList="VisaRemarkArr"></my-edit>
      </div>
    </div>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import * as Quill from "quill"; //引入编辑器
import MyEdit from "../../EditTemplate.vue";
//quill编辑器的字体
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif"
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

export default {
  props: [
    "subArray",
    "NoticeData",
    "ShopList",
    "SelfpayingList",
    "AllCityList",
    "CountryID" //国家编号
  ],
  data() {
    return {
      //字体样式
      fonts: [
        "SimSun",
        "SimHei",
        "Microsoft-YaHei",
        "KaiTi",
        "FangSong",
        "Arial",
        "Times-New-Roman",
        "sans-serif"
      ],
      //下拉框默认值
      DefaultSelectValue: 0,
      //引用的数据
      referenceList: [],
      // 获取相似行程数组
      FreeIncludeArr: [],
      FeeNonIncludeArr: [],
      ImportantTipArr: [],
      WarmTipArr: [],
      B2BRemarkArr: [],
      ShopRemarkArr: [],
      VisaRemarkArr: [],
      //购物店下拉框
      ShopItemList: [],
      ShopAllList: [],
      SelfpayingAllList: [],

      toolbar: {
        clean: false, //加粗
        font: false, //字体
        narrative: true //叙述,
      },
      //折叠展开
      isFold: ""
    };
  },
  components: {
    "my-edit": MyEdit
  },
  methods: {
    GetCityName(shopId, item) {
      if (shopId != 0) {
        //获取当前选中的对象
        let obj = {};
        obj = this.ShopItemList.find(item => {
          return item.ID === shopId; //筛选出匹配数据
        });
        if (obj != undefined) {
          item.CityName = obj.CityName;
          item.CityId = obj.CityId;
        }
      }
    },
    onEditorChange({ editor, html, text }, typeStr) {
      //富文本编辑器  文本改变时 设置字段值
      switch (typeStr) {
        case "FeeInclude":
          this.NoticeData.FeeInclude = html;
          break;
        case "FeeNonInclude":
          this.NoticeData.FeeNonInclude = html;
          break;
        case "ImportantTip":
          this.NoticeData.ImportantTip = html;
          break;
        case "WarmTip":
          this.NoticeData.WarmTip = html;
          break;
        case "B2BRemark":
          this.NoticeData.B2BRemark = html;
          break;
        case "ShopRemark":
          this.NoticeData.ShopRemark = html;
          break;
        case "VisaRemark":
          this.NoticeData.VisaRemark = html;
          break;
      }
    },
    //点击折叠
    fold() {
      if (this.isFold == "") {
        this.isFold = 1;
      } else {
        this.isFold = "";
      }
    },
    //获取相似的行程特色列表
    GetSameFeatureList() {
      var msg = {
        ID: this.subArray.ConfigId,
        LineId: this.subArray.LineID,
        LineteamId: this.subArray.LineteamId
      };
      this.apipost(
        "travel_get_GetTopTenSameFeatureList",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.FreeIncludeArr = [];
            this.FeeNonIncludeArr = [];
            this.ImportantTipArr = [];
            this.WarmTipArr = [];
            this.B2BRemarkArr = [];
            this.ShopRemarkArr = [];
            res.data.data.forEach(x => {
              if (x.FeeInclude != null) {
                this.FreeIncludeArr.push(x.FeeInclude);
              }
              if (x.FeeNonInclude != null) {
                this.FeeNonIncludeArr.push(x.FeeNonInclude);
              }
              if (x.ImportantTip != null) {
                this.ImportantTipArr.push(x.ImportantTip);
              }
              if (x.WarmTip != null) {
                this.WarmTipArr.push(x.WarmTip);
              }
              if (x.B2BRemark != null) {
                this.B2BRemarkArr.push(x.B2BRemark);
              }
              if (x.ShopRemark != null) {
                this.ShopRemarkArr.push(x.ShopRemark);
              }
            });
          }
        },
        err => {}
      );
    },
    getVisaDescribe() {
      this.apipost(
        "dmc_get_visa_GetAllVisaDescribe",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.VisaRemarkArr = res.data.data;
          }
        },
        err => {}
      );
    },
    //获取购物店下拉框
    getShopItemList() {
      if (event) {
        var qmsg = { QCountry: this.CountryID };
        this.apipost(
          "Shopping_Post_GetList",
          qmsg,
          res => {
            if (res.data.resultCode == 1) {
              this.ShopItemList = res.data.data;
            }
          },
          err => {}
        );
      }
    },
    SelfpayingShow(item) {
      item.IsShow = 1;
    },
    SelfpayingHide(item, selfIndex) {
      if (item.Id > 0) {
        item.IsShow = 0;
      } else {
        this.SelfpayingAllList.splice(selfIndex, 1);
      }
    },

    //新增购物店
    AddShop() {
      let haveNotSaveData = false;
      if (this.ShopAllList.length > 0) {
        this.ShopAllList.forEach(x => {
          if (x.Id === 0) {
            haveNotSaveData = true;
          }
        });
      }
      if (haveNotSaveData) {
        this.Info("请先完善或删除未保存的购物店数据");
      } else {
        var obj = {
          Id: 0,
          ConfigId: this.subArray.ConfigId,
          CityId: 0,
          ShopId: 0,
          VisitTime: "",
          IsShow: 1
        };
        this.ShopAllList.push(obj);
      }
    },
    //保存购物店
    SaveShop(item) {
      this.apipost(
        "travel_Post_SetShop",
        item,
        res => {
          if (res.data.resultCode == 1) {
            this.GetShopList();
          }
        },
        err => {}
      );
    },
    //删除购物店
    DelShop(shopItem, shopIndex) {
      this.ShopAllList.splice(shopIndex, 1);
      if (shopItem.Id > 0) {
        this.apipost(
          "travel_Post_RemoveShop",
          {
            ID: shopItem.Id
          },
          res => {
            if (res.data.resultCode == 1) {
              this.GetShopList();
            }
          },
          err => {}
        );
      }
    },
    //购物店列表
    GetShopList() {
      this.apipost(
        "travel_Get_GetShopList",
        {
          ConfigId: this.subArray.ConfigId
        },
        res => {
          if (res.data.resultCode == 1) {
            this.ShopAllList = res.data.data;
          }
        },
        err => {}
      );
    },
    ShopShow(item) {
      item.IsShow = 1;
    },
    ShopHide(item, shopIndex) {
      if (item.Id > 0) {
        item.IsShow = 0;
      } else {
        this.ShopAllList.splice(shopIndex, 1);
      }
    },
    //新增自费购物
    AddSelfpaying() {
      let haveNotSaveData = false;
      if (this.SelfpayingAllList.length > 0) {
        this.SelfpayingAllList.forEach(x => {
          if (x.Id === 0) {
            haveNotSaveData = true;
          }
        });
      }
      if (haveNotSaveData) {
        this.Info("请先完善或删除未保存的自费安排");
      } else {
        var obj = {
          Id: 0,
          ConfigId: this.subArray.ConfigId,
          CityId: 0,
          ItemName: "",
          EstimatedCost: "",
          Explain: "",
          IsShow: 1
        };
        this.SelfpayingAllList.push(obj);
      }
    },
    //保存自费项目
    SaveSelfpaying(item) {
      this.apipost(
        "travel_Post_SetSelfpaying",
        item,
        res => {
          if (res.data.resultCode == 1) {
            this.GetSelfpayingList();
          }
        },
        err => {}
      );
    },
    //删除自费项目
    DelSelfpaying(selfItem, shopIndex) {
      this.SelfpayingAllList.splice(shopIndex, 1);
      if (selfItem.Id > 0) {
        this.apipost(
          "travel_Post_RemoveSelfpaying",
          {
            ID: selfItem.Id
          },
          res => {
            if (res.data.resultCode == 1) {
              this.GetSelfpayingList();
            }
          },
          err => {}
        );
      }
    },
    //获取自费项目列表
    GetSelfpayingList() {
      this.apipost(
        "travel_Get_GetSelfpayingList",
        {
          ConfigId: this.subArray.ConfigId
        },
        res => {
          if (res.data.resultCode == 1) {
            this.SelfpayingAllList = res.data.data;
          }
        },
        err => {}
      );
    }
  },
  mounted() {
    this.GetSameFeatureList();
    this.getVisaDescribe();
  },
  created() {
    // this.getShopItemList();
  },
  watch: {
    //监听参数
    subArray: {
      handler: function(val, oldVal) {
        if (val.ConfigId != "0") {
          this.GetSameFeatureList();
        }
      },
      deep: true
    },
    NoticeData: {
      //深度监听，可监听到对象、数组的变化
      handler: function(val, oldVal) {
        this.$emit("headCallBack", this.NoticeData);
      },
      deep: true
    },
    ShopList: {
      handler: function(val, oldVal) {
        this.ShopAllList = this.ShopList;
      },
      deep: true
    },
    SelfpayingList: {
      handler: function(val, oldVal) {
        this.SelfpayingAllList = this.SelfpayingList;
      },
      deep: true
    }
  }
};
</script>