<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <el-table
      :data="list"
      :row-key="getRowKeys" :expand-row-keys="expands"
      style="width: 100%;">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="子模块名称" style="margin-right: 100px;">
              <span v-for="(item, index) in scope.row.list" style="margin-right: 30px;"
                    :key="item.id">{{index+1}}、{{item.name}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        align="center" label="序号" width="65">
      </el-table-column>
      <el-table-column width="250" align="center" label="板块">
        <template slot-scope="scope">
          <span>{{scope.row.parent.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="子板块">
        <template slot-scope="scope">
          <span>{{scope.row.childStr}}</span>
          <el-button size="mini" type="text" @click="showMore(scope.row)">查看更多</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button size="small" class="el-button el-button--text el-button--small" v-if="scope.row.parent.level!=1" @click="handleUpdate(scope.row)">
            {{'编辑'}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 编辑、创建 modal弹窗 -->
    <el-dialog :title="modalTitle" :visible.sync="dialogVisible">
      <el-form :model="form" :rules="formRules" ref="form" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="模块">
              <el-input v-model="form.parent.name" disabled placeholder="模块"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button size="small" class="el-button el-button--primary" type="button" icon="plus" @click="addTag(form.parent)">
              添加子模块
            </el-button>
          </el-form-item>
        </el-row>
        <el-row v-for="item in form.list"
                :key="item.id" v-if="item.isDel == 0">
          <el-col :span="8">
            <el-form-item label="子模块">
              <el-input v-model="item.name" placeholder="请输入子模块名称"></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="8">-->
<!--            <el-form-item label="排序" prop="rank">-->
<!--              <el-input v-model="item.rank" placeholder="请输入排序值"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="4">
            <el-button type="danger" size="small" style="margin-left: 10px;" @click="deleteItem(item)">删除</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelHandel">取 消</el-button>
        <el-button type="primary" @click="update('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
  .el-upload-list {
    display: flex;
    width: 100px;
  }

  .el-upload-list li {
    margin-left: 10px;
  }
</style>
<script>
  import 'static/css/uploadImg.css';// 引入图片上传组件对话框
  import {
    list,
    save,
  } from 'src/api/officialWebsite/seoList';

  import rsCode from '../../utils/rsCode';

  import {mapGetters} from 'vuex';

  import Element1 from "../admin/menu/components/element";
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  import ElIcon from "../../../node_modules/element-ui/packages/icon/src/icon.vue";

  export default {
    name: 'tourManage',
    components: {
      ElIcon,
      ElCol,
      ElRow,
      Element1
    },
    data() {
      return {
        modalTitle: "创建",
        dialogVisible: false,//添加、编辑弹框
        showLoadingBody: false,
        expands: [],
        labelForm: {
          name: "",
          rank: 0
        },//待编辑的排序
        form: {
          parent: {
            id: undefined,
            level: 1,
            name: "",
            parentId: 0,
            rank: 0,
            isDel: 0
          },
          list: [{
            id: undefined,
            level: 2,
            name: "",
            parentId: undefined,
            rank: 0,
            isDel: 0
          }]
        },
        formRules: {},
        list:[]
      }
    },
    created() {
      this.getList();
    },
    computed: {
      ...mapGetters([
        'elements',
        'belong2Type'
      ])
    },
    methods: {
      /**
       * 添加二级标签
       * */
      addTag(parent) {
        let t = {
          id: undefined,
          level: parent.level+1,
          name: "",
          parentId:parent.id,
          rank: 0,
          isDel: 0
        };
        this.form.list.push(t);
      },
      /**
       * 删除
       * */
      deleteItem(obj) {
        obj.isDel = 1;
        this.form.list.some((item, i)=>{
           if (item==obj){
             if (!this.$utils.isInteger(item.id)){
               this.form.list.splice(i,1);
               return true;
             }
           }
        })
      },
      /**
       * 查看更多
       * */
      showMore(row) {
        let expands = [];
        expands.push(row.parent.id);
        this.expands = expands;
      },
      getRowKeys(row) {
        return row.parent.id
      },

      /**
       * 添加
       * */
      handleCreate() {
        this.cleanForm();
        this.modalTitle = '创建';
        this.dialogVisible = true;
      },
      /**
       * 操作-编辑
       * */
      handleUpdate(row) {
        this.modalTitle = '编辑';
        this.cleanForm();
        this.form = row;
        console.log(JSON.stringify(this.form));
        this.dialogVisible = true;
      },
      /**
       * 弹框-取消
       * */
      cancelHandel() {
        this.rankDialogVisible = false;
        this.dialogVisible = false;
        this.cleanForm();

      },
      /**
       * 清空表单
       * */
      cleanForm() {
        this.form = {
          parent: {
            id: undefined,
            level: 1,
            name: "",
            parentId: 0,
            rank: 0,
            isDel: 0
          },
          list: [{
            id: undefined,
            level: 2,
            name: "",
            parentId: undefined,
            rank: 0,
            isDel: 0
          }]
        };
      },
      /**
       * 获取列表数据
       * */
      getList() {
        list().then(response => {
          let listRs = undefined;
          if (!this.$utils.isEmpty(response.data)) {
            listRs = response.data;
            response.data.map(function (item) {
              // item.parent.visible2 = false;
              let childStr = [];
              item.list.map(function (citem, index) {
                if (index < 10) {
                  childStr.push(citem.name);
                }
              });
              item.childStr = childStr.join("|");
            });
          }
          this.listLoading = false;
          this.list = listRs;
        });
      },
      /**
       * 编辑-更新
       * */
      update(formName) {
        const set = this.$refs;

        this.form.childStr = undefined;
        console.log(JSON.stringify(this.form));
       const parameter={parentId:this.form.parent.id,list:this.form.list}
        set[formName].validate(valid => {
          if (valid) {
            save(parameter)
              .then(response => {
                if (response.status === 200) {
                  this.dialogVisible = false;
                  this.$notify({
                    title: '成功',
                    message: '创建成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.getList();
                } else {
                  this.$notify({
                    title: '失败',
                    message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                    type: 'error',
                    duration: 2000
                  });
                }
              });
          } else {
            return false;
          }
        });
      },

    }
  }
</script>
