<template>
  <div class="main">
    <div class="header">
      <div>勾选</div>
      <div>图标</div>
      <div>文本</div>
    </div>
    <div v-for="(group, idx_g) in operation_data" :key="idx_g">
      <div class="group-title">{{ group.title }}</div>
      <div class="row" v-for="(item, idx) in group.buttons" :key="idx">
        <div class="row-item">
          <div class="check"><el-checkbox :disabled="item.disabled" v-model="item.check" style="width: 100%;" :label="item.text" border></el-checkbox></div>
          <div class="operation" v-if="item.check">
            <div class="select">
              <el-select placeholder="请选择图标" v-model="item.icon">
                <el-option v-for="item_select in options" :key="item_select.value" :label="item_select.label" :value="item_select.value"></el-option>
              </el-select>
            </div>
            <el-input class="input-text" v-model="item.customer_text" placeholder="请输入定义文本"></el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import system from '../../api/system.js';

export default {
  name: 'dialog-single-tree',
  props: {
    menu_id:{
      type:String,
      required: true,
      
    }
  },
  components: {},
  data() {
    return {
      options: [
        {
          value: '0',
          label: '默认图标'
        },
        {
          value: '1',
          label: '图标1'
        },
        {
          value: '选项2',
          label: '图标2'
        },
        {
          value: '选项3',
          label: '图标3'
        },
        {
          value: '选项4',
          label: '图标4'
        },
        {
          value: '选项5',
          label: '图标5'
        }
      ],
      operation_data: [
        {
          title: '基本操作',
          buttons: [
            {
              text: '新建',
              icon: '0',
              check: false,
              disabled: true,
              customer_text: '新建'
            },
            {
              text: '批量删除',
              icon: '0',
              check: false,
              customer_text: '删除'
            },
            {
              text: '删除',
              icon: '0',
              check: false,
              customer_text: '删除'
            },
            {
              text: '删除',
              icon: '0',
              check: false,
              customer_text: '删除'
            }
          ]
        },
        {
          title: '工作流操作',
          buttons: [
            {
              text: '提交',
              icon: '0',
              check: false,
              customer_text: '提交'
            },
            {
              text: '撤回',
              icon: '0',
              check: false,
              customer_text: '撤回'
            }
          ]
        },
        {
          title: '导入导出',
          buttons: [
            {
              text: '提交',
              icon: '0',
              check: false,
              customer_text: '提交'
            },
            {
              text: '撤回',
              icon: '0',
              check: false,
              customer_text: '撤回'
            }
          ]
        }
      ]
    };
  },
  computed: {},
  mounted() {
    // let that = this;
    // let commit_data = {'menu_id':that.menu_id}
    // system.call_method('sys_flame_page_operation', 'getOperationGroupByMenuid', commit_data, res => {
    //   console.log('res', res);
    //   if (res.result === true) {
    //     that.operation_data = res.items;
    //   } else {
    //     that.$message({
    //       type: 'info',
    //       message: res.message
    //     });
    //   }
    // });
  },

  // 监控ID 是否变化，如果变化之后重新取新的数据
  watch: {
    show_dialog(NewV, oldV) {
      let that = this;
      that.is_show = NewV;
    },
    menu_id(NewV,OldV){
      let that = this;
      that.LoadData(NewV);
    }
  },
  methods: {
    closeDialog(value) {
      let that = this;
      that.is_show = false;
      that.$emit('dialogClose');
    },
    LoadData(menu_id){
      let that = this;
      let commit_data = {'menu_id':menu_id}
      system.call_method('sys_flame_page_operation', 'getOperationGroupByMenuid', commit_data, res => {
        console.log('res', res);
        if (res.result === true) {
          that.operation_data = res.items;
        } else {
          that.$message({
            type: 'info',
            message: res.message
          });
        }
      });
    },
    dropChange() {
      let that = this;
      that.is_change = true;
    },
    // 确定对话框
    confirmDialog() {
      let that = this;
      that.is_show = false;
      let tree_data = that.$refs.ref_tree.getTreeData();
      that.$emit('dialogConfig', tree_data);
    },
    // 提到所有操作的数据
    getOperationData(){
      let that = this;
      return that.operation_data;
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  .header{
    display: flex;
    width: 100%;
    background-color: #FAFAFA;
    justify-content: space-around;
    align-items:center;
    vertical-align: center;
    font-size: $font-size-normal;
    font-weight: bold;
    height: 30px;
  }
  .group-title {
    font-weight: bold;
    margin: 5px;
  }
  .row {
    background-color: white;
    margin-left: 20px;
    margin-right: 20px;
    padding: 5px;
    .row-item {
      display: flex;
      width: 100%;
      // border: 1px solid #ebeef5;
      .check {
        width: 150px;
        min-width: 150px;
      }
      .operation {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 5px;
        .select {
        }
        .input-text {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
