<style scoped>
  .icon {
    height: 30px;
  }

  .ApprovalProcessBg {
    background: #f8f8f8;
    max-height: 400px;
    overflow-y: auto;
  }

</style>
<template>
  <div class="flexOne">
    <div class="query-box">
      <ul>
        <li>
          <span><em>{{$t('system.query_airName')}}</em>
            <el-input v-model='msg.CategoryName' class="permiss-input" :placeholder="$t('fnc.qsrneirong')"></el-input>
          </span>
        </li>
        <li>
          <span><em>{{$t('objFill.cengji')}}</em>
            <el-select v-model="msg.Level" :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
              <el-option :label="$t('objFill.jibies')[0]" value="1"></el-option>
              <el-option :label="$t('objFill.jibies')[1]" value="2"></el-option>
              <el-option :label="$t('objFill.jibies')[2]" value="3"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{$t('admin.admin_status')}}</em>
            <el-select v-model="msg.Enable" :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
              <el-option :label="$t('fnc.qiyong')" value="1"></el-option>
              <el-option :label="$t('active.ld_jinyong')" value="2"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" name="" id="" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" />
          <input type="button"
            @click="outerVisible = true,dialogTitle=$t('objFill.v101.xinzengfl'),clearMessage() ,getAllAreaTreeList(0),getLineTeamList();"
            class="normalBtn" :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <el-table :data="DataList" style="width:100%" v-loading='loading'>
      <el-table-column fixed :label="$t('ground.fenleimc')" width="150">
        <template slot-scope="scope">
          <div>
            {{scope.row.CategoryName}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('objFill.cengji')" width="80">
        <template slot-scope="scope">
          <div>
            {{['', $t('objFill.jibies')[0],$t('objFill.jibies')[1],$t('objFill.jibies')[2]][scope.row.Level]}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('objFill.v101.Rest.fuji')" width="80">
        <template slot-scope="scope">
          <div>
            {{scope.row.ParentName}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('objFill.v101.Rest.shifouremen')" width="80">
        <template slot-scope="scope">
          <div>
            {{scope.row.IsHot === 1 ? $t('pub.yes') : $t('pub.no')}}</div>
          <div>{{scope.row.TotalInventory}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('op.IsSelfGuidedTour')" width="100">
        <template slot-scope="scope">
          <div>
            {{scope.row.IsSelfGuidedTour === 1 ? $t('pub.yes') : $t('pub.no')}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('hotel.hotel_corrlelatition')">
        <template slot-scope="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.Areas+scope.row.Lines+scope.row.Seriess"
            placement="top"
          >
            <div style="white-space: nowrap;width: 100%;overflow: hidden;text-overflow: ellipsis;">
              <p v-if="scope.row.Areas">{{ scope.row.Areas }}</p>
              <p v-if="scope.row.Lines">{{ scope.row.Lines }}</p>
              <p v-if="scope.row.Seriess">{{ scope.row.Seriess }}</p>
            </div>
          </el-tooltip>
          <!-- <template v-if="scope.row.AreaList&&scope.row.AreaList.length>0">
            <div>
              <span v-for="(file,fIndex) in scope.row.AreaList" :key="`d_`+scope.row.Id+`_a_`+fIndex">
                {{file.Name}}{{(fIndex== (scope.row.AreaList.length-1)&&scope.row.AreaList.length>1)?"":","}}
              </span>
            </div>
          </template>
          <template v-if="scope.row.LineList&&scope.row.LineList.length>0">
            <div>
              <span v-for="(file,fIndex) in scope.row.LineList" :key="`d_`+scope.row.Id+`_l_`+fIndex">
                {{file.Name}}{{(fIndex== (scope.row.LineList.length-1)&&scope.row.LineList.length>1)?"":","}}
              </span>
            </div>
          </template>
          <template v-if="scope.row.SeriesList&&scope.row.SeriesList.length>0">
            <div>
              <span v-for="(file,fIndex) in scope.row.SeriesList" :key="`d_`+scope.row.Id+`_s_`+fIndex">
                {{file.Name}}{{(fIndex== (scope.row.SeriesList.length-1)&&scope.row.SeriesList.length>1)?"":","}}
              </span>
            </div>
          </template> -->
        </template>
      </el-table-column>
      <el-table-column :label="$t('objFill.v101.paixuma')" width="80">
        <template slot-scope="scope">
          <div>
            {{scope.row.Sort}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('objFill.v101.activity.col6.t8')" width="100">
        <template slot-scope="scope">
          <el-image class="icon" :src="scope.row.Icon" :preview-src-list="[scope.row.Icon]"> </el-image>
        </template>
      </el-table-column>
      <el-table-column :label="$t('objFill.v101.Rest.beijintup')" width="130">
        <template slot-scope="scope">
          <el-image class="icon" :src="scope.row.BackgroundImage" :preview-src-list="[scope.row.BackgroundImage]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column :label="$t('admin.admin_status')" width="80">
        <template slot-scope="scope">
          <div>
            {{scope.row.Enable === 1 ? $t('fnc.qiyong') :$t('active.ld_jinyong')}}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('system.table_operation')" header-align="center" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
            <el-button type="primary" icon="el-icon-edit" circle
              @click="outerVisible = true,dialogTitle=$t('objFill.v101.bianjifenl'),updateData(scope.row)">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
            <el-button v-if="!scope.row.IsLock" type="danger" icon="el-icon-delete" circle
              @click="deleteData(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
    </el-pagination>

    <el-dialog :title="dialogTitle" :visible.sync="outerVisible" center width="1000px" :before-close="closeChangeMachie"
      append-to-body>
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('system.query_airName')" prop="CategoryName">
              <el-input style="width:217px" type="text" :disabled="addMsg.IsLock === 1" v-model="addMsg.CategoryName"
                maxlength="50" :placeholder="$t('system.query_airName')">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('system.table_rank')">
              <el-input style="width:217px" type="number" v-model="addMsg.Sort" maxlength="10"
                :placeholder="$t('system.table_rank')">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('objFill.cengji')" prop="Level">
              <el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.Level" :placeholder="$t('pub.pleaseSel')"
                @change="handleLevelChange">
                <el-option :label="$t('objFill.jibies')[0]" :value="1"></el-option>
                <el-option :label="$t('objFill.jibies')[1]" :value="2"></el-option>
                <el-option :label="$t('objFill.jibies')[2]" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('objFill.v101.fujifenl')">
              <el-select :disabled="addMsg.IsLock === 1" filterable v-model="addMsg.ParentId"
                :placeholder="$t('pub.pleaseSel')" @change="handleParentIdChange">
                <el-option v-for="item in cateGoryList" :key="item.Id" :label="item.CategoryName" :value="item.Id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('objFill.v101.Rest.shifouremen')">
              <el-switch v-model="addMsg.IsHot"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('visa.v_shifouqiyong')">
              <el-switch :disabled="addMsg.IsLock === 1" v-model="addMsg.Enable"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('op.IsSelfGuidedTour')">
              <el-checkbox v-model="addMsg.IsSelfGuidedTour" @change="changeSelfGuidedTour()" :true-label="1"
                :false-label="0">{{$t('pub.yes')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <template v-if="addMsg.IsSelfGuidedTour==0">
              <template v-if="addMsg.Level==1">
                <el-form-item :label="$t('system.table_ssLine')">
                  <el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.LineIdList" multiple collapse-tags
                    :placeholder="$t('pub.pleaseSel')" filterable>
                    <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
                    <el-option v-for="item in queryCommonData.LineList" :label="item.LineName" :value="item.LineID"
                      :key="item.LineID"></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item :label="$t('active.ad_xlmc')">
                  <el-select :disabled="addMsg.IsLock === 1" v-model="addMsg.SeriesIdList" multiple collapse-tags
                    :placeholder="$t('pub.pleaseSel')" filterable>
                    <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
                    <el-option v-for="item in queryCommonData.LineTeamList" :label="item.LtName" :value="item.LtID"
                      :key="item.LtID"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </template>
            <template v-else>
              <el-form-item :label="$t('pub.area')">
                <el-select v-model="showCategoryName" :placeholder="$t('pub.pleaseSel')" multiple clearable
                  collapse-tags @change="selectChange">
                  <el-option :value="chooseCategroyArray" style="height: auto">
                    <el-tree :data="queryCommonData.AreaList" show-checkbox node-key="Id" ref="tree" highlight-current
                      :props="{label: 'Name', children: 'SubList'}" :default-expanded-keys="addMsg.AreaIdList"
                      :default-checked-keys="addMsg.AreaIdList" @check-change="handleNodeClick"></el-tree>
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('system.table_Url')">
              <el-input style="width:217px" type="text" :disabled="addMsg.IsLock === 1" v-model="addMsg.LinkUrl"
                maxlength="50" :placeholder="$t('system.ph_url')">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('objFill.v101.activity.col6.t8')">
              <uploadImg :maxNum="1" ref="Icon"></uploadImg>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('objFill.v101.Rest.beijintup')">
              <uploadImg :maxNum="1" ref="BackgroundImage"></uploadImg>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import uploadImg from '../../pubComponents/uploadImg'
  export default {
    components: {
      uploadImg
    },
    data() {
      return {
        imageOptions: {
          navbar: false,
          title: false
        },
        chooseCategroyArray: [],
        showCategoryName: "",
        queryCommonData: {
          LineList: [],
          LineTeamList: [],
          AreaList: [],
          AreaAllList: [],
          SelectDefaultValue: ''
        },
        defaultProps: {
          children: 'ChildList',
          label: 'DepartmentName',
        },
        images: [],
        dialogTitle: '',
        loading: false,
        DataList: [],
        cateGoryTree: [],
        cateGoryList: [],
        total: 0,
        pageSize: '',
        currentPage: 1,
        outerVisible: false,
        msg: { //列表查询请求数据
          pageIndex: 1,
          pageSize: 15,
          Enable: '1'
        },
        addMsg: {
          Level: '',
          ParentId: '',
          CategoryName: '',
          Icon: '',
          IsHot: false,
          Sort: '',
          BackgroundImage: '',
          Enable: true,
          AreaIds: "",
          LineIds: "",
          SeriesIds: "",
          AreaIdList: [],
          LineIdList: [],
          SeriesIdList: [],
          IsSelfGuidedTour: 0,
          LinkUrl: "", //页面地址
        },
        rules: {
          CategoryName: [{
            required: true,
            message: this.$t('objFill.v101.qingsruflemc'),
            trigger: 'blur'
          }],
          Level: [{
            required: true,
            message: this.$t('objFill.v101.qingxzcenji'),
            trigger: 'change'
          }],
        },
      }
    },
    mounted() {
      this.getLineList();
      this.getList();
    },
    methods: {
      //商品分类下拉框改变
      selectChange(e) {
        var arrNew = [];
        var dataLength = this.chooseCategroyArray.length;
        var eleng = e.length;
        for (let i = 0; i < dataLength; i++) {
          for (let j = 0; j < eleng; j++) {
            if (e[j] === this.chooseCategroyArray[i].Name) {
              arrNew.push(this.chooseCategroyArray[i])
            }
          }
        }
        this.$refs.tree.setCheckedNodes(arrNew); //设置勾选的值
      },
      handleNodeClick() {
        let res = this.$refs.tree.getCheckedNodes(true, true);
        let arrLabel = [];
        let arr = [];
        res.forEach(item => {
          arrLabel.push(item.Name);
          arr.push(item);
        });
        this.chooseCategroyArray = arr;
        this.showCategoryName = arrLabel;
      },
      getLineList() { //获取线路列表
        this.apipost("line_post_GetAllList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.queryCommonData.LineList = res.data.data;
            }
          }
        );
      },
      getAllAreaTreeList(type) { //获取地区树形列表数据
        this.apipost(
          "ws_get_GetAllAreaTreeList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.queryCommonData.AreaList = res.data.data.list;
              this.queryCommonData.AreaAllList = res.data.data.dataList;
              if (type == 1) {
                if (this.queryCommonData.AreaAllList != null && this.queryCommonData.AreaAllList.length > 0) {
                  let arrLabel = [];
                  this.queryCommonData.AreaAllList.forEach((item, index) => {
                    this.addMsg.AreaIdList.forEach((itemId, indexId) => {
                      if (item.Id == itemId) {
                        arrLabel.push(item.AreaName);
                      }
                    });
                  });
                  this.showCategoryName = arrLabel;
                  this.$forceUpdate()
                }
              }
            }
          }
        );
      },
      getLineTeamList(LineIds) { //获取系列列表
        this.apipost("team_post_GetList", {
          LineIds: LineIds,
          lineID: 0
        }, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineTeamList = res.data.data;
          }
        });
      },
      showImage(src) {
        this.$set(this.images, 0, src);
        setTimeout(() => {
          this.$viewer.show();
        }, 1000);
      },
      inited(viewer) {
        this.$viewer = viewer
      },
      handleClick(data, checked, node) {
        if (checked) {
          this.$refs.tree.setCheckedNodes([data]);
          this.addMsg.ParentId = data.Id
        }
      },
      getList() { //列表查询
        this.loading = true
        this.apipost('ws_post_GetCategoryPageList', this.msg, res => {
          if (res.data.resultCode == 1) {
            let arrList = function(list){
              list.forEach(x=>{
                x.Areas = ''
                x.Lines = ''
                x.Seriess = ''
              })
            }
            arrList(res.data.data.pageData)
            this.DataList = res.data.data.pageData;
            for(let i=0;i<this.DataList.length;i++){
              if(this.DataList[i].AreaList&&this.DataList[i].AreaList.length>0){
                for(let j=0;j<this.DataList[i].AreaList.length;j++){
                  this.DataList[i].Areas+=this.DataList[i].AreaList[j].Name+ (j!=this.DataList[i].AreaList.length-1?',':'')
                }
              }
              if(this.DataList[i].LineList&&this.DataList[i].LineList.length>0){
                for(let j=0;j<this.DataList[i].LineList.length;j++){
                  this.DataList[i].Lines+=this.DataList[i].LineList[j].Name+ (j!=this.DataList[i].LineList.length-1?',':'')
                }
              }
              if(this.DataList[i].SeriesList&&this.DataList[i].SeriesList.length>0){
                for(let j=0;j<this.DataList[i].SeriesList.length;j++){
                  this.DataList[i].Seriess+=this.DataList[i].SeriesList[j].Name+ (j!=this.DataList[i].SeriesList.length-1?',':'')
                }
              }
            }
            this.total = res.data.data.count;
          }
          this.loading = false
        }, err => {
          this.loading = false
        })
      },
      handleLevelChange() {
        this.addMsg.ParentId = ''
        if (this.addMsg.Level <= 1) {
          this.cateGoryList = [];
          this.addMsg.LineIdList = [];
          this.addMsg.SeriesIdList = [];
          this.addMsg.AreaIdList = [];
        } else {
          this.getCateGoryList();
        }
      },
      changeSelfGuidedTour() {
        this.addMsg.LineIdList = [];
        this.addMsg.SeriesIdList = [];
        this.addMsg.AreaIdList = [];
      },
      handleParentIdChange() {
        if (this.addMsg.ParentId > 0) {
          let lineIds = '';
          let index = this.cateGoryList.findIndex(item => item.Id === this.addMsg.ParentId);
          this.addMsg.LineIdList = [];
          this.addMsg.SeriesIdList = [];
          this.addMsg.AreaIdList = [];
          if (index != -1) {
            lineIds = this.cateGoryList[index].LineIds;
          }
          this.getLineTeamList(lineIds);
        }
      },
      getCateGoryList() {
        this.apipost('ws_post_GetCategoryList', {
          Level: Number(this.addMsg.Level) - 1,
          CategoryName: '',
          pageIndex: 1,
          pageSize: 100
        }, res => {
          if (res.data.resultCode == 1) {
            this.cateGoryList = res.data.data;
          }
        }, err => {})
      },
      addData() { //新增数据
        const icon = this.$refs.Icon.ImageList[0]
        const background = this.$refs.BackgroundImage.ImageList[0]
        this.addMsg.Icon = icon
        this.addMsg.BackgroundImage = background
        if (!this.addMsg.ParentId && this.addMsg.Level !== 1) {
          this.$message.error(this.$t('objFill.v101.qingxzfujifl'));
          return
        }
        let params = {
          ...this.addMsg
        }
        params.IsHot = params.IsHot ? 1 : 2
        params.Enable = params.Enable ? 1 : 2
        if (params.LineIdList && params.LineIdList.length > 0) {
          params.LineIds = params.LineIdList.toString();
        }
        if (params.SeriesIdList && params.SeriesIdList.length > 0) {
          params.SeriesIds = params.SeriesIdList.toString();
        }
        var tempCategory = "";
        if (this.chooseCategroyArray && this.chooseCategroyArray.length > 0) {
          this.chooseCategroyArray.forEach(item => {
            tempCategory += item.Id + ",";
          })
        }
        params.AreaIds = tempCategory.substring(0, tempCategory.lastIndexOf(','));

        this.apipost('ws_post_SetCategory', params, res => {
          if (res.data.resultCode == 1) {
            this.outerVisible = false;
            this.$message.success(res.data.message)
            this.getList();
          } else {
            this.$message.error(res.data.message);
          }
        }, err => {})

      },
      updateData({
        Id
      }) { //修改

        this.apipost('ws_post_GetCategory', {
          Id
        }, res => {
          let params = res.data.data
          params.IsHot = params.IsHot === 1
          params.Enable = params.Enable === 1
          this.addMsg = params;
          this.$refs.Icon.ImageList = params.Icon ? [params.Icon] : [];
          this.$refs.BackgroundImage.ImageList = params.BackgroundImage ? [params.BackgroundImage] : [];
          if (this.addMsg.IsSelfGuidedTour == 1) {
            this.getAllAreaTreeList(1);

          } else if (this.addMsg.IsSelfGuidedTour == 0 && this.addMsg.Level > 1) {
            this.getCateGoryList()
            this.getLineTeamList(params.LineIds);
          } else {
            this.getLineTeamList();
          }
        }, err => {})
      },
      //删除
      deleteData(item) {
        var that = this;
        that.Confirm(that.$t('tips.shifoushanchu'), function () {
          that.apipost(
            "ws_post_RemoveCategory", {
              Id: item.Id
            },
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      clearMessage() {
        this.addMsg = {
          Level: '',
          ParentId: '',
          CategoryName: '',
          Icon: '',
          IsHot: false,
          Sort: '',
          BackgroundImage: '',
          Enable: true,
          AreaIds: "",
          LineIds: "",
          SeriesIds: "",
          AreaIdList: [],
          LineIdList: [],
          SeriesIdList: [],
          IsSelfGuidedTour: 0,
        }
        if (this.$refs.Icon && this.$refs.Icon.ImageList && this.$refs.Icon.ImageList.length > 0) {
          this.$refs.Icon.ImageList = []
        }
        if (this.$refs.BackgroundImage && this.$refs.BackgroundImage.ImageList && this.$refs.Icon.BackgroundImage
          .ImageList.length > 0) {
          this.$refs.BackgroundImage.ImageList = []
        }
      },
      resetPageIndex() {
        this.msg.pageIndex = 1
        this.currentPage = 1
      },
      submitForm(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addData()
          } else {
            return false;
          }
        });
      },
      closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
        done();
        this.resetForm('addMsg');
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
      }
    }
  }

</script>