<template>
  <div class="run-modal-style">
    <Form :model="modelForm" ref="templateForm" class="ivu-form-no-margin-bottom" :rules="rule" :label-width="90">
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="templateName" :label="$t('module.menuTemplate.templateName')">
            <Input placeholder="" size="small" v-model="modelForm.templateName" maxlength="50"></Input>
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item prop="templateCode" :label="$t('module.menuTemplate.templateCode')">
            <Input placeholder="" size="small" v-model="modelForm.templateCode" maxlength="50"></Input>
          </Form-item>
        </Col>
      </Row>
      <Form-item :label="$t('module.menuTemplate.desc')">
        <Input placeholder="" size="small" v-model="modelForm.remark" maxlength="100"></Input>
      </Form-item>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
          <Form-item prop="templateState" :label="$t('common.status')">
            <Select size="small" v-model="modelForm.templateState">
              <Option :title="$t('common.valid')" :value="1" :key="1">{{$t('common.valid')}}</Option>
              <Option :title="$t('common.invalid')" :value="2" :key="2">{{$t('common.invalid')}}</Option>
            </Select>
          </Form-item>
        </Col>
        <Col span="12" style="border:none;">
          <Form-item prop="orgId" :label="$t('module.userManage.affiliation')">
            <select-org :org-id="modelForm.orgId" :org-name="modelForm.orgName" @change="onOrgChange"></select-org>
          </Form-item>
        </Col>
      </Row>
    </Form>
    <div style="padding-left:30px;">
      <p slot="header">
        <span>{{$t('module.menuTemplate.funPermission')}}</span>
      </p>
      <div style="height: 260px;overflow-y: auto;overflow-x: hidden">
        <el-tree :data="baseData" :show-checkbox="true" ref="menuTree" :props="treeProps" node-key="menuId" default-expand-all></el-tree>
      </div>
    </div>
  </div>
</template>
<script>
import Three from "../../../tools/getThree.js";
export default{
  name: 'MenuTemplateEdit',
  components:{
  },
  props:{
    templateId:{
      type: String,
      default(){
        return '';
      }
    },
    version:{
      type: String,
      default(){
        return '';
      }
    },
  },
  data(){
    return{
      modelForm: {
        templateId: this.templateId,
        templateCode: "",
        templateName: "",
        remark: "",
        templateState: "",
        orgId: "",
        orgName: "",
        menuIds: ""
      },
      rule: {
        templateCode: [{ required: true, message: this.$t('module.menuTemplate.enterCode'), trigger: "blur" }],
        templateName: [{ required: true, message: this.$t('module.menuTemplate.enterName'), trigger: "blur" }],
        orgId: [{ required: true, message: this.$t('module.menuTemplate.enterOrg'), trigger: "blur" }],
      },
      baseData: [],
      treeProps: {
        label: "title",
        children: "children"
      },
    }
  },
  computed:{

  },
  created:function(){
    if(this.templateId){
      this.$emit('SetTitle', this.$t('module.menuTemplate.updateTemp'));
    }else{
      this.$emit('SetTitle', this.$t('module.menuTemplate.createTemp'));
    }
    this.$emit('SetPageSize', 650);
    this.$emit('SetPageActions', [
      {
        text: this.$t('common.save'),
        theme: "primary",
        handle: () => {
          this.save();
        }
      },
      {
        text: this.$t('common.close'),
        theme: "primary",
        handle: () => {
          this.$emit('Close');
        }
      }
    ])
  },
  beforeMount:function(){

  },
  mounted:function(){
    this.init();
  },
  beforeDestroy:function(){

  },
  destroyed:function(){

  },
  methods:{
    init(){
      if(this.templateId){
        $store.dispatch("GetTemplateDetail", { templateId: this.templateId }).then(response => {
          this.modelForm = {
            templateId: response.templateId,
            templateCode: response.templateCode,
            templateName: response.templateName,
            remark: response.remark,
            templateState: response.templateState,
            orgId: response.orgId,
            orgName: response.orgName,
            menuIds: response.menuIds,
            version: this.version
          };
        });
      }
      // 功能权限
      $store.dispatch("GetMenuTree", { templateId: this.templateId }).then(response => {
        this.baseData = new Three(response.data).json;
        this.$refs["menuTree"].setCheckedKeys(response.checkList);
      })
    },
    save() {
      this.$refs["templateForm"].validate(valid => {
        if (valid) {
          // 功能权限数据
          let menusList = this.$refs["menuTree"].getCheckedNodes();
          let menuIds = [];
          let btnIds = [];
          for (let item of menusList) {
            if (!!item.btnCode) {
              btnIds.push(item.menuId);
              menuIds.push(item.menuModuleId);
            } else {
              menuIds.push(item.menuId);
            }
          }
          this.modelForm.menuIds = menuIds.join(",");
          this.modelForm.btnIds = btnIds.join(",");
          if (this.templateId) {
            $store.dispatch("UpdateTemplate", this.modelForm).then(response => {
              if (response.statusCode == "0") {
                this.$Message.success({
                  content: this.$t('common.updateSuccess'),
                  duration: 3
                });
                this.$emit('Close');
              } else {
                this.$Message.warning({
                  content: response.msg,
                  duration: 3
                });
              }
            });
          } else {
            $store.dispatch("AddTemplate", this.modelForm).then(response => {
              if (response.statusCode == "0") {
                this.$Message.success({
                  content: this.$t('common.createSuccess'),
                  duration: 3
                });
                this.$emit('Close');
              } else {
                this.$Message.warning({
                  content: response.msg,
                  duration: 3
                });
              }
            });
          }
        } else {
          this.$Message.error({
            content: this.$t('common.formValidateFailed'),
            duration: 3
          });
          return 0;
        }
      });
    },
    onOrgChange(org) {
      this.modelForm.orgId = org.orgId;
      this.modelForm.orgName = org.orgName;
    }
  },
  watch:{

  },
  directives:{

  }
}
</script>
