<style>
  .scenicRecommentList .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
  }

  .scenicRecommentList .hotelResource {
    width: 100%;
    min-height: 500px;
    margin-top: 20px;
  }

  .scenicRecommentList .resourceList {
    width: 215px;
    height: 240px;
    background-color: #fff;
    border: 1px dashed #ededed;
    border-radius: 4px;
    margin: 0 20px 20px 0;
    font-size: 12px;
    color: #333333;
    float: left;
  }

  .scenicRecommentList .resourceList:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  .scenicRecommentList .reTopInfo {
    width: 100%;
    height: 123px;
    position: relative;
  }

  .scenicRecommentList .reTopInfo img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .scenicRecommentList .resTypeList {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .scenicRecommentList .resTypeList span {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 10px;
    color: #fff;
    margin-right: 10px;
  }

  .scenicRecommentList .L1 {
    background-color: #e95252;
  }

  .scenicRecommentList .L2 {
    background-color: #47bf8c;
  }

  .scenicRecommentList .L3 {
    background-color: #2aaef2;
  }

  .scenicRecommentList .L4 {
    background-color: #9cf;
  }

  .scenicRecommentList .L5 {
    background-color: #00c6ff;
    margin-top: 5px;
  }

  .scenicRecommentList .starSu {
    position: absolute;
    bottom: 8px;
    right: 10px;
    display: flex;
  }

  .scenicRecommentList .starSu .star {
    margin-left: 5px;
  }

  .scenicRecommentList .sushe {
    background-color: #ffc800;
    display: inline-block;
    padding: 1px 5px;
    border-radius: 10px;
    color: #fff;
  }

  .scenicRecommentList .hotelTitle {
    margin: 20px 16px 0 16px;
    font-size: 14px;
    color: #333333;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scenicRecommentList .brandList i {
    position: relative;
    top: 2px;
  }

  .scenicRecommentList .brand {
    float: left;
    width: 49%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .scenicRecommentList .dayNum {
    float: right;
    text-align: center;
    width: 50%;
  }

  .scenicRecommentList .dieline {
    color: #2aaef2;
    font-size: 14px;
    top: 1px !important;
  }

  .scenicRecommentList .AddressInner {
    float: right;
    width: 160px;
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .scenicRecommentList .btnList {
    margin-top: 20px;
    text-align: center;
  }

  .scenicRecommentList .hotelBtn {
    width: 60px;
    height: 28px;
    background: #f76f6f;
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
  }

  .scenicRecommentList .w150 .el-input {
    width: 150px !important;
  }

  .scenicRecommentList .SupportCount {
    color: #4bca81;
    font-size: 18px;
    font-weight: bold;
    margin: 0 5px 5px 0;
    display: inline-block;
  }

  .scenicRecommentList .dayNumber {
    color: #2aaef2;
    font-size: 18px;
    font-weight: bold;
    margin: 0 5px 5px 5px;
    display: inline-block;
  }

  .scenicRecommentList .line {
    float: left;
    width: 1px;
    height: 35px;
    background-color: #ededed;
    margin-top: 6px;
  }

  .scenicRecommentList .foodList {
    display: inline-block;
    padding: 1px 5px;
    background-color: #ff9c00;
    color: #fff;
    margin-right: 6px;
    border-radius: 2px;
  }

  .scenicRecommentList .foodList:last-child {
    margin-right: 0;
  }

  .scenicRecommentList .delScien {
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
  }

  .scenicRecommentList .delScien:hover {
    color: #f76f6f;
    cursor: pointer;
  }

  .scenicRecommentList .resourceList:hover .delScien {
    display: block;
  }

  .scenicRecommentList .comCursorUrl {
    cursor: pointer;
  }

  .scenicRecommentList .ql-container {
    min-height: 150px;
  }

  .scenicRecommentList .el-upload-dragger {
    font-size: 28px;
    color: #8c939d;
    width: 126px;
    height: 80px;
    line-height: 41px;
    text-align: center;
  }

  .scenicRecommentList .ql-editor {
    min-height: 150px;
  }

  /* 景区推荐列表 */

</style>
<template>
  <div class="flexOne scenicRecommentList">
    <div class="query-box">
      <ul>
        <li>
          <span class="hotel_name">
            <em>攻略名称</em>
            <el-input maxlength="50" @keyup.native.enter="resetPageIndex(),getList()" v-model="msg.Name">
            </el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('system.quety_area')}}</em>
            <el-select v-model="msg.CountryId" clearable class="w150" filterable
              @change="getProvinceList(msg.CountryId,1)" :placeholder="$t('hotel.hotel_country')">
              <el-option label="不限" :value="0"></el-option>
              <el-option v-for="item in countryList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
            <el-select v-model="msg.ProviceId" class="w150" filterable @change="getProvinceList(msg.ProviceId,2)"
              :placeholder="$t('hotel.hotel_province')">
              <el-option label="不限" :value="0"></el-option>
              <el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
            <el-select v-model="msg.CityId" class="w150" filterable :placeholder="$t('hotel.hotel_city')">
              <el-option label="不限" :value="0"></el-option>
              <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <button class="hollowFixedBtn" type="button"
            @click="resetPageIndex(),getList()">{{$t('pub.searchBtn')}}</button>
          <button class="normalBtn" type="button" @click="outerVisible=true,initMsg()">{{$t('pub.addBtn')}}</button>
        </li>
      </ul>
    </div>
    <div class="hotelResource clearfix">
      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
        <tr>
          <th width="80">
            编号
          </th>
          <th width="150">
            名称
          </th>
          <th width="300">
            地区
          </th>
          <th width="150">
            封面
          </th>
          <th width="100">
            操作人
          </th>
          <th width="120">
            操作时间
          </th>
          <th width="120">
            操作
          </th>
        </tr>
        <tr v-for="(item,index) in DataList" :key="index">
          <td>
            {{item.Id}}
          </td>
          <td>
            {{item.Name}}
          </td>
          <td>
            {{item.CountryName}}-{{item.ProviceName}}-{{item.CityName}}
          </td>
          <td>
            <img :src="item.ImgCover" style="width:50px;height:30px" />
          </td>
          <td>
            {{item.UpdateName}}
          </td>
          <td>
            {{item.UpdateTimeStr}}
          </td>
          <td>
            <el-tooltip class="item" effect="dark" content="修改" placement="top">
              <el-button type="primary" icon="el-icon-edit" circle @click="GetScenic(item.Id)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="预览" placement="top">
              <el-button type="primary" icon="iconfont icon-view" circle @click="goView(item.Id)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" icon="iconfont icon-img_delete_small" circle
                @click="removeScenicRecomment(item.Id)"></el-button>
            </el-tooltip>
          </td>
        </tr>
        <tr v-if="!(DataList && DataList.length>0)">
          <td colspan="7">
            暂无数据...
          </td>
        </tr>
      </table>
    </div>

    <el-dialog custom-class="w800" :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="80px">
        <el-form-item label="攻略名称" prop="Name">
          <el-input v-model="addMsg.Name" class="w595" />
        </el-form-item>
        <el-form-item label="国家">
          <el-select v-model="addMsg.CountryId" clearable class="w300" filterable
            @change="getProvinceListTwo(addMsg.CountryId,1)" :placeholder="$t('hotel.hotel_country')">
            <el-option label="不限" :value="0"></el-option>
            <el-option v-for="item in countryList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省">
          <el-select v-model="addMsg.ProviceId" class="w300" filterable @change="getProvinceListTwo(addMsg.ProviceId,2)"
            :placeholder="$t('hotel.hotel_province')">
            <el-option label="不限" :value="0"></el-option>
            <el-option v-for="item in provinceList2" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市">
          <el-select v-model="addMsg.CityId" class="w300" filterable :placeholder="$t('hotel.hotel_city')">
            <el-option label="不限" :value="0"></el-option>
            <el-option v-for="item in cityList2" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图">
          <div class="_addUpload_box">
            <div class="_pic_upload">
              <template v-if="addMsg.ImgCover!==''">
                <div>
                  <div style="width:125px;height:80px;overflow: hidden;display: flex;align-items: center;">
                    <img :src="addMsg.ImgCover">
                  </div>
                  <div style="font-size:12px; color:#666666;cursor: pointer;line-height: 20px;"
                    @click="addMsg.ImgCover=''">重新上传</div>
                </div>
              </template>
              <el-upload v-else drag :http-request="uploadFileBtn" :multiple="false" :show-file-list="false" action>
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__text">{{$t("active.ld_djscwj")}}</div>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="攻略内容" prop="lotteryRules">
          <my-edit class="w595" style="margin-top:-30px;" v-bind:editValue="addMsg.Content" v-on:edit-value="addMsg.Content = arguments[0]" v-bind:toolbarShow="toolbar"
            v-bind:referenceList="DefaultList" v-bind:placeholder="placeholder"></my-edit>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
      :page-size="msg.pageSize" layout="total,prev, pager, next, jumper" :total="msg.total"></el-pagination>
  </div>
</template>
<script>
  import MyEdit from "../EditTemplate.vue";
  export default {
    components: {
      "my-edit": MyEdit,
    },
    data() {
      return {
        DataList: "",
        noData: false,
        loading: true,
        outerVisible: false,
        defaultImg: 'this.src="' + require("../../assets/img/bg_z1@2x.png") + '"',
        countryList: [],
        provinceList: [],
        cityList: [],
        placeholder: "请输入",
        dialogTitle:'新增景点信息',
        DefaultList: [],
        toolbar: {
          clean: true,
          font: false, //字体
          narrative: false, //叙述,
          image: true,
          bold:true,
          italic:true,
          underline:true,
          header1:true,
          header2:true,
          fontColor:true,
          leftIndent:true,
          rightIndent:true
        },
        provinceList2: [],
        cityList2: [],
        msg: {
          pageIndex: 1,
          pageSize: 14,
          Name: "",
          CountryId: 0,
          ProviceId: 0,
          CityId: 0,
          total: 0,
          currentPage: 1,
          Id: 0
        },
        addMsg: {
          Id: 0,
          Name: 0,
          ImgCover: "",
          Content: "",
          CountryId: 651,
          ProviceId: 0,
          CityId: 0
        },
        rules: {
          Name: [{
            required: true,
            message: '请输入名称',
            trigger: "change"
          }],
        },

      };
    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.msg.currentPage = 1;
      },
      removeScenicRecomment(ID) {
        var that = this;
        that.Confirm(that.$t('tips.shifoushanchu'), function () {
          that.apipost(
            "ScenicRecomment_Post_RemoveScenicRecommentService", {
              Id: ID
            },
            response => {
              if (response.data.resultCode == 1) {
                that.Success(that.$t('tips.shanchuchenggong'));
                that.getList();
              } else {
                that.Error(response.data.message);
              }
            },
            null
          );
        });
      },
      getList() {
        this.loading = true;
        this.apipost(
          "ScenicRecomment_Get_GetScenicRecommentPageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.msg.total = res.data.data.count;
              this.noData = !this.msg.total > 0;
              this.DataList = res.data.data.pageData;
              this.outerVisible = false;
            }
          },
          null
        );
      },
      uploadFileBtn(file) {
        //上传
        if (file.file.size > 1024 * 1024 * 10) {
          this.$message.warning(this.$t("tips.wjdxbncgsz"));
          return;
        }
        //  1 文档  2 数据 3 图片
        let typeArr = [{
          stringArr: "GIF|JPG|JPEG|PNG|BMP",
          type: 3
        }];
        let ft = file.file.name
          .substring(file.file.name.lastIndexOf(".") + 1, file.file.name.length)
          .toUpperCase();
        let fileTypeNumber = 2;
        let typeOk = false;
        typeArr.forEach(x => {
          if (x.stringArr.indexOf(ft) != "-1") {
            fileTypeNumber = x.type;
            typeOk = true;
          }
        });
        if (!typeOk) return this.Error(this.$t("tips.qsctpian"));
        let newArr = [];
        newArr.push(file.file);
        let path = "/Upload/DMC/";
        this.Success(this.$t("tips.shangchuanzhong"));
        this.UploadSelfFileT(path, newArr, x => {
          let fileSize =
            file.file.size < 1024 ?
            file.file.size :
            (file.file.size / 1024).toFixed(0);
          this.addMsg.ImgCover = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.Success(this.$t("tips.scchenggong"));
          this.$forceUpdate();
        });
      },
      closeChangeMachie(done) {
        //弹出框关闭初始化弹框内表单
        done();
        this.initMsg()
      },
      //初始化
      initMsg() {
        this.dialogTitle='新增景点信息';
        this.addMsg.Id = 0;
        this.addMsg.Name = "";
        this.addMsg.ImgCover = "";
        this.addMsg.Content = "";
        this.addMsg.CountryId = 0;
        this.addMsg.ProviceId = 0;
        this.addMsg.CityId = 0;
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.addScenic();
          } else {
            return false;
          }
        });
      },
      //新增
      addScenic() {
        this.apipost(
          "ScenicRecomment_Post_SetScenicRecommentService",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.getList();
              this.outerVisible = false;
              this.initMsg();
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //修改
      GetScenic(id) {
        this.dialogTitle='修改景点信息';
        this.apipost(
          "ScenicRecomment_Get_GetScenicRecommentService", {
            Id: id
          },
          res => {
            if (res.data.resultCode == 1) {
              this.addMsg.Id = res.data.data.Id;
              this.addMsg.Name = res.data.data.Name;
              this.addMsg.ImgCover = res.data.data.ImgCover;
              this.addMsg.Content = res.data.data.Content;
              this.addMsg.CountryId = res.data.data.CountryId;
              this.getProvinceListTwo(this.addMsg.CountryId,1);
              this.addMsg.ProviceId = res.data.data.ProviceId;
              this.getProvinceListTwo(this.addMsg.ProviceId,2);
              this.addMsg.CityId = res.data.data.CityId;
              this.outerVisible = true;
            }
          },
          null
        );
      },
      //获取国家
      getCountryList() {
        this.apipost(
          "dict_post_Destination_GetCountry", {},
          res => {
            this.countryList = res.data.data;
          },
          err => {}
        );
      },
      getProvinceList(ID, type) {
        //根据省份获取城市
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.msg.ProviceId = 0;
          this.msg.CityId = 0;
        } else if (type == 2) {
          this.msg.CityId = 0;
        }
        if (this.msg.CountryId !== "") {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.provinceList = res.data.data;
              } else if (type == 2) {
                this.cityList = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      getProvinceListTwo(ID, type) {
        //根据省份获取城市
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.addMsg.ProviceId = 0;
          this.addMsg.CityId = 0;
        } else if (type == 2) {
          this.addMsg.CityId = 0;
        }
        if (this.addMsg.CountryId !== "") {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.provinceList2 = res.data.data;
              } else if (type == 2) {
                this.cityList2 = res.data.data;
              }
            },
            err => {}
          );
        }
      },

      //跳转至预览页面
      goView(id){
        this.$router.push({
          name: 'ScenicStrategyview',
          query: {
            id: id,
            blank: 'y',
            tab: name
          }
        })
      }
    },
    mounted() {
  
      
    },
    created() {
          this.getCountryList();
          this.getProvinceList(651, 1);
      if (this.$route.query.hasOwnProperty("cache")) {
        if (this.$store.state.pageCondition != null) {
          this.msg = this.$store.state.pageCondition;
        }
      }
      var id = this.$route.query.ID;
      if (id) {
        this.msg.getList = id;
      }
      this.getList();
    }
  };

</script>
