<template>
  <div class="editWindowBox">
    <div class="editWindowBoxContent">
      <!--组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论-->
      <!--开发助手-->
      <div class="testAssistant">
        <div class="testAssistantTitle">
          开发助手：当前窗口在正式版本中将被移除。
        </div>
        <div class="testAssistantContent">
          <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
          <div class="testAssistantContentItem"><span>组件位置:</span>{{this.$store.state.template.editComponentSort}}</div>
          <div class="testAssistantContentItem"><span>数据类型:</span>{{this.$store.state.template.editComponentType}}</div>
          <div class="testAssistantContentItem"><span>展示条数:</span>{{this.$store.state.template.editComponentSize}}</div>
        </div>
      </div>
      <!--1.普通新闻类型-->
      <div v-if="this.$store.state.template.editComponentType == 1">
        <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
            <el-input value="新闻列表" disabled/>
          </el-form-item>
          <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
            <el-cascader :key="oneParentKey" v-model="form.pid_arr" placeholder="请选择网站导航" :props="oneParentData" filterable clearable></el-cascader>
          </el-form-item>
          <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
            <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
          </el-form-item>
        </el-form>
      </div>
      <!--2.tabs类型-->
      <div v-if="this.$store.state.template.editComponentType == 2">
        <el-form :model="form.type2data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
            <el-input value="新闻选项卡" disabled/>
          </el-form-item>
          <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
            <el-cascader :key="moreParentKey" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader>
          </el-form-item>
          <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
            <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
          </el-form-item>
        </el-form>
      </div>
      <!--3.广告-->
      <div v-if="this.$store.state.template.editComponentType == 3">
        <el-form :model="form.type3data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
            <el-input value="广告" disabled/>
          </el-form-item>
          <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adsName" class="custom-align-right">
            <el-input v-model="form.type3data.adsName" placeholder="请输入广告位名称"/>
          </el-form-item>
        </el-form>
      </div>
      <!--4.友情链接-->
      <div v-if="this.$store.state.template.editComponentType == 4">
        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
            <el-input value="友情链接暂不支持编辑" disabled/>
          </el-form-item>
        </el-form>
      </div>
      <!--6.静态-->
      <div v-if="this.$store.state.template.editComponentType == 6">
        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
            <el-input value="静态组件暂不支持编辑" disabled/>
          </el-form-item>
        </el-form>
      </div>
      <!--7.文字-->
      <div v-if="this.$store.state.template.editComponentType == 7">
        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
            <el-input value="文本" disabled/>
          </el-form-item>
          <el-form-item label="标题名称：" :label-width="formLabelWidth" prop="adsName" class="custom-align-right">
            <el-input v-model="form.type7data.titleName" placeholder="请输入标题名称"/>
          </el-form-item>
        </el-form>
      </div>
      <!--8.评论组件-->
      <div v-if="this.$store.state.template.editComponentType == 8">
        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
            <el-input value="评论组件暂不支持编辑" disabled/>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="editWindowBoxFooter">
      <el-button type="info" @click="closeEditWindow">取消</el-button>
      <el-button type="primary" @click="submitData">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {

  },
  data() {
    let self = this;
    const validatePid = (rule,value,callback) => {
      console.log(value.length)
      if (value.length === 0) {
        callback(new Error('必须选择一个导航！'))
      } else {
        callback()
      }
    }
    const validateEmpty = (rule,value,callback) => {
      if (!value || value.trim() === "") {
        callback(new Error('该项不能为空！'));
      } else {
        callback();
      }
    }
    return {
      formLabelWidth:"120px",
      
      form:{
        //单导航新闻
        type1data:{
          pid_arr:[],
          pageSize:""
        },
        //tabs多导航新闻
        type2data:{
          pid_arr:[],
          pageSize:""
        },
        //广告
        type3data:{
          adName:""
        },
        //文字
        type7data:{
          titleName:""
        }
      },
      formRules:{
        pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
        adsName: [{required:true,trigger:'blur',message:'请填写标题名称！',validator:validateEmpty}],
      },
      //获取单个导航id start---------------------------------------->
      oneParentKey:0,
      oneParentData: {
        checkStrictly: true,
        lazy: true,
        async lazyLoad (node, resolve) {
          const { level, data } = node;
          if (data && data.children && data.children.length !== 0) {
            return resolve(node)
          }
          console.log(level)
          let parentId = level == 0 ? 0 : data.value
          let parames = {
            'pid':parentId
          }
          self.$store.dispatch('pool/categoryList',parames).then(res=> {
            if (res.data) {
              const nodes = res.data.map(item => ({
                value: item.id,
                label: item.name,
                leaf: level >= 3,
                children: []
              }))
              resolve(nodes)
            }
          })
        }
      },
      //获取单个导航id end---------------------------------------->
      //获取多个导航id start---------------------------------------->
      moreParentKey:0,
      moreParentData: {
        checkStrictly: true,
        multiple: true,
        lazy: true,
        async lazyLoad (node, resolve) {
          const { level, data } = node;
          if (data && data.children && data.children.length !== 0) {
            return resolve(node)
          }
          console.log(level)
          let parentId = level == 0 ? 0 : data.value
          let parames = {
            'pid':parentId
          }
          self.$store.dispatch('pool/categoryList',parames).then(res=> {
            if (res.data) {
              const nodes = res.data.map(item => ({
                value: item.id,
                label: item.name,
                leaf: level >= 3,
                children: []
              }))
              resolve(nodes)
            }
          })
        }
      },
      //获取导航id end---------------------------------------->
    };
  },
  methods: {
    closeEditWindow(){
      this.$store.commit('template/closeEditWindowStatus');
    },
    submitData(){
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log("保存数据！")
         
        }
      })
    }
  },
  mounted() {
    
  },
};
</script>

<style scoped lang="less">
  .editWindowBox {
    .editWindowBoxContent {
      width: 100%;
      padding: 20px;
    }
    .editWindowBoxFooter {
      text-align: right;
    }
  }
  //表单微调 start------------------------------------------------------------>
  ::v-deep .editWindowBoxContent .el-cascader{
    width: 100% !important;
  }
  ::v-deep .editWindowBoxContent .el-select--medium {
    width: 100% !important;
  }
  //表单微调 end------------------------------------------------------------>
</style>
