<template>
    <Modal v-model="show" :title="title" width="500" :mask-closable="false" @on-cancel="close">
        <div class="navigator-info">
          <div class="navigator-info-name"><i>*</i>名称</div>
          <div class="navigator-info-input">
            <Input v-model="name" placeholder="仅用于内部运营人员识别使用" style="width: 300px" />
          </div>
        </div>
        <div class="navigator-info">
          <div class="navigator-info-name">导航背景色</div>
          <div class="navigator-info-input color">
            <Input class="color-input" v-model="bgColor" />
            <ColorPicker v-model="bgColor" />
          </div>
        </div>
         <div class="navigator-info">
          <div class="navigator-info-name">导航背景图</div>
          <div class="navigator-info-input">
            <uploader v-model="bgImg" class="uploader" :showInput="false"/>
          </div>
        </div>
        <div class="navigator-list">
          <div
            class="navigator-list-item"
            v-for="(item, index) in navigatorData"
            :key="index"
          >
            <div class="navigator-list-item_title">
              <span>一级导航</span>
              <div class="operation">
                <Button type="primary" size="small" :disabled="index == 0" @click="sort(index, 1)">上移</Button>
                <Button type="primary" size="small" :disabled="index == navigatorData.length - 1" @click="sort(index, 2)">下移</Button>
                <Icon type="close-round" @click="deleteNavigatorConfigItem(index)"></Icon>
              </div>
            </div>
            <div class="navigator-list-item_content">
              <span><i>*</i>导航名称</span>
              <Input v-model="item.name" placeholder="请输入导航名称"  />
            </div>
             <div class="navigator-list-item_content">
              <span><i>*</i>类型</span>
              <div class="navigator-list-item_content_list">
                <RadioGroup v-model="item.type">
                    <Radio :label="1">
                        <span>图文形式</span>
                    </Radio>
                    <Radio :label="2">
                        <span>纯图形式</span>
                    </Radio>
                </RadioGroup>
              </div>
            </div>
            <div class="navigator-list-item_content">
              <span />
              <div class="navigator-list-item_content_settings">
                <div class="item">
                  <div class="label"><i>*</i>选中图标</div>
                  <div class="setting">
                    <uploader v-model="item.selectIcon" class="uploader" :showInput="false" />
                  </div>
                </div>
                <div class="item">
                  <div class="label"><i>*</i>未选中图标</div>
                  <div class="setting">
                    <uploader v-model="item.icon" class="uploader" :showInput="false" />
                  </div>
                </div>
                <div class="item" v-if="item.type == 1">
                  <div class="label"><i>*</i>选中文案颜色</div>
                  <div class="setting">
                    <Input class="color-input" v-model="item.selectColor" @on-blur="changeColor" />
                    <ColorPicker v-model="item.selectColor" />
                  </div>
                </div>
                <div class="item" v-if="item.type == 1">
                  <div class="label"><i>*</i>未选中文案颜色</div>
                  <div class="setting">
                    <Input class="color-input" v-model="item.color" @on-blur="changeColor" />
                    <ColorPicker v-model="item.color" />
                  </div>
                </div>
              </div>
            </div>
            <div class="navigator-list-item_content">
              <span><i>*</i>选择页面</span>
              <Button @click="clickSelectPageButton(index)">选择</Button>
            </div>
            <div class="navigator-list-item_content" v-if="item.pageType == 2">
              <span>是否展示导航</span>
              <Checkbox v-model="item.carryNav" />
            </div>
            <div class="navigator-list-item_content">
              <span></span>
              <span class="select" v-if="item.pageName && item.pageUrl">
                {{item.pageName}}<template v-if="item.pageType != 1"> - {{item.pageUrl}}</template>
              </span>
            </div>
          </div>
        </div>
        <div class="navigator-add">
          <Button type="primary" icon="plus-round" id="add-button" long @click="addNavigatorConfig">新增一级导航</Button>
        </div>
        <div class="modal-footer" slot="footer">
          <Button type="ghost" @click="close">取消</Button>
          <Button type="primary" @click="confirm">保存</Button>
        </div>
        <div v-if="showSelectPageModal">
         <Modal v-model="showSelectPageModal" :mask-closable="false" id="selectPageModal" title="选择页面" width="1000">
            <Tabs :value="pageTabType">
              <TabPane label="功能页面" name="1">
                <featurePageTable
                  @selectPage="selectPage"
                />
              </TabPane>
              <TabPane label="活动页面" name="2">
                <activityPageTable @selectPage="selectPage" />
              </TabPane>
              <TabPane label="导航页面" name="3">
                <navigatorPageTable :nav-id="id" @selectPage="selectPage" />
              </TabPane>
            </Tabs>
            <div slot="footer" />
          </Modal>
        </div>
    </Modal>
</template>
<script>
import uploader from '../../../component/DynamicForm/component/Upload/index.vue';
import featurePageTable from './featurePageTable.vue';
import activityPageTable from './activityPageTable.vue';
import navigatorPageTable from './navigatorPageTable.vue';
import navigatorApi from '@api/navigator.api'
export default {
  components: {
    uploader,
    featurePageTable,
    activityPageTable,
    navigatorPageTable
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    navigatorConfig: {
      type: [Object, null],
      default: null
    }
  },
  watch: {
    navigatorConfig: {
      handler(val) {
        this.title = val ? '编辑' : '新增'
        if (val) {
          const obj = Object.assign({}, val);
          this.name = val.name;
          this.id = val.id;
          this.bgColor = val.bgColor;
          this.bgImg = val.bgImg;
          this.navigatorData = obj.navigatorData;
        } else {
          this.name = '';
          this.id = '';
          this.bgColor = '';
          this.bgImg = '';
          this.navigatorData = [];
        }
      },
      immediate: true
    }
  },
  computed: {
    show: {
      get() {
        this.author = JSON.parse(localStorage.getItem('user')).account || '';
        return this.value ? true : false;
      },
      set(v) {}
    }
  },
  data() {
    return {
      title: '', // 弹窗标题
      name: '', // 导航名称
      navigatorData: [], // 导航配置
      id: '',
      author: '',
      bgColor: '',
      bgImg: '',
      standardEditDataModel: { // 新增、编辑时会用到的标准导航数据模型
        name: '',
        type: 1,
        color: '',
        selectColor: '',
        icon: '',
        selectIcon: '',
        pageType: '',
        pageUrl: '',
        pageName: '',
        carryNav: true, // 是否携带导航
      },
      selectPageIndex: -1, // 选择页面 config索引
      showSelectPageModal: false,
      pageTabType: "1", // 标签页默认
      
    }
  },
  methods: {
    selectPage(data) {
      // 选择页面
      this.navigatorData[this.selectPageIndex].pageType = data.pageType;
      this.navigatorData[this.selectPageIndex].pageUrl = data.pageUrl;
      this.navigatorData[this.selectPageIndex].pageName = data.pageName;
      this.showSelectPageModal = false;
    },
    clickSelectPageButton(index) {
      this.selectPageIndex = index;
      this.showSelectPageModal = true; 
    },
    close() {
      // 关闭事件
      this.$emit('close')
      this.resetData();
    },
    resetData() {
      // 关闭前重置数据
      this.name = '';
      this.navigatorData = [];
      this.id = '';
      this.author = '';
      this.bgColor = '';
      this.bgImg = '';
    },
    addNavigatorConfig() {
      // 添加导航配置
      if (this.navigatorData.length === 5) {
        return this.$toast('最多支持配置5个导航');
      }
      this.navigatorData.push(Object.assign({}, this.standardEditDataModel));
      this.$nextTick(() => {
        try {
          document.getElementById('add-button').scrollIntoView();
        } catch (e) {
          console.log(e);
        }
      })
    },
    deleteNavigatorConfigItem(index) {
      // 删除导航配置
      this.navigatorData.splice(index, 1);
    },
    validate() {
      const reg = /^(?:#[A-Fa-f0-9]{3}|#[A-Fa-f0-9]{6})$/;
      // 校验值
      if (!this.name) {
        this.$toast('请填写名称');
        return false;
      }
      if (!this.navigatorData.length) {
        this.$toast('请配置导航');
        return false;
      }
      if (this.navigatorData.length < 2 || this.navigatorData.length > 5) {
        this.$toast('导航配置数量范围2-5个');
        return false;
      }
      if (this.bgColor && !reg.test(this.bgColor)) {
        this.$toast('导航背景色格式错误，请重新填写');
        return false;
      }
      const arr = JSON.parse(JSON.stringify(this.navigatorData));
      let navigatorNameExist = true; // 导航名称是否创建
      let typeExist = true; // 导航类型是否选择(目前默认选择了图文形式)
      for (let i = 0; i < arr.length; i++ ) {
        if (!arr[i].name) {
          navigatorNameExist = false;
        }
        if (!arr[i].type) {
          typeExist = false;
        }
        if (arr[i].name && arr[i].name.length > 5) {
          this.$toast('导航名称最大支持5个字符，请检查后重新填写');
          return false;  
        }
        if (
          arr[i].type == 1 
          &&
          (!arr[i].color || !arr[i].selectColor || !arr[i].icon || !arr[i].selectIcon)
        ) {
          this.$toast('图文形式配置缺失，请填写后重试');
          return false;  
        }
        if(arr[i].type == 1 && (!reg.test(arr[i].color) || !reg.test(arr[i].selectColor))) {
          this.$toast('导航文字颜色格式错误，请重新填写');
          return false;
        }
        if (
          arr[i].type == 2
          &&
          (!arr[i].icon || !arr[i].selectIcon)
        ) {
          this.$toast('纯图形式配置缺失，请填写后重试');
          return false;  
        }
        if(!arr[i].pageName || !arr[i].pageUrl || !arr[i].pageType) {
          this.$toast('请选择页面');
          return false;
        }
      }
      if (!navigatorNameExist) {
        this.$toast('导航名称缺失，请填写后重试');
        return false;
      }
      if (!typeExist) {
        this.$toast('导航类型缺失，请选择后重试');
        return false;
      }
      return true;
    },
    async confirm() {
      // 提交
      // 首先要进行校验
      if (!this.validate()) return;
      const params = {
        name: this.name.trim(),
        navigatorData: this.navigatorData,
        author: this.author.trim(),
        id: this.id,
        bgColor: this.bgColor.trim(),
        bgImg: this.bgImg.trim()
      };
      await navigatorApi.saveNavigator(params);
      this.$toast('保存成功');
      this.$emit('close', 1);
      this.resetData();
    },
    changeColor(evnet, data) {
      data = /^(?:#[A-Fa-f0-9]{3}|#[A-Fa-f0-9]{6})$/.test(evnet.target.value) ? evnet.target.value : ""
    },
    sort(index, type) {
      /**
       * feat: 上移下移
       * index: 当前点击的元素索引
       * type: 移动类型，1上移，2下移
       */
      const arr = this.navigatorData.concat([]);
      const targetIndex = type === 1 ? index - 1 : index + 1;
      arr[index] = arr.splice(targetIndex, 1, arr[index])[0];
      this.navigatorData = arr;
    }
  },
}
</script>
<style scoped lang="less">
#selectPageModal{
  z-index: 1009;
  /deep/ .ivu-modal-mask, /deep/ .ivu-modal-wrap{
    z-index: 1009
  }
  /deep/ .ivu-modal-body{
    height: 70vh;
    overflow-y: auto;
  }
}
/deep/ .ivu-modal-body{
  max-height: 70vh;
  overflow-y: auto;
}
.navigator-info{
  width: 100%;
  // height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  &-name{
    margin-right: 10px;
    width: 80px;
    text-align: right;
    i{
      color:#f00;
    }
  }
  &-input{
    &.color{
      display: flex;
      align-items: center;
      .color-input{
        margin-right: 10px;
      }
    }
  }
}
.navigator-list{
  &-item{
    border: 1px solid #dddee1;
    border-radius: 5px;
    margin-top: 20px;
    padding: 10px;
    &_title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .operation{
        display: flex;
        align-items: center;
        button{
          margin-right: 12px;
          &:first-child{
            margin-right: 6px;
          }
        }
      }
      /deep/ .ivu-icon{
        cursor: pointer;
      }
    }
    &_content{
      margin-top: 10px;
      display: flex;
      align-items: center;
      span{
        display: inline-block;
        width: 80px;
        flex-shrink: 0;
        margin-right: 10px;
        i{
          color:#f00;
        }
        &.select{
          display: inline-block; flex: 1;word-break:break-all
        }
      }
      &_list{
        display: flex;
        align-items: center;
      }
      &_settings{
        border-radius: 5px;
        flex: 1;
        padding: 10px;
        border: 1px solid #dddee1;
        .item{
          margin-bottom: 10px;
          min-height: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          &:last-child{
            margin-bottom: 0;
          }
          .label{
            width: 100px;
            flex-shrink: 0;
            i{
              color:#f00;
            }
          }
          .setting{
            display: flex;
            align-items: center;
            height: 100%;
            flex: 1;
            /deep/ .uploader{
              width: 100%;
            }
            /deep/ .color-input{
              width: 150px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
.navigator-add{
  margin-top: 20px;
}
</style>