<!-taoyuan->
<template>
  <div>
    <el-dialog :title="dialogObj.title" :visible.sync="dialogObj.dialogVisible" :close-on-click-modal="false" :size='dialogObj.size' v-popupdra-directive="{'show': dialogObj.dialogVisible}">

      <div v-if= "dialogObj.type == 'menuMaintenance'">
        <el-form :model="dialogObj.data.form" label-width="100px" ref="query" :rules="addrules">
          <el-row>
            <el-col :span='24'>
              <el-col :span='8'>
                <el-form-item  prop="resCode" label="菜单代码" >
                  <el-input v-model="dialogObj.data.form.resCode" auto-complete="off" class="inputInline" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span='8'>
                <el-form-item  prop="resName" label="菜单名称" >
                  <el-input v-model="dialogObj.data.form.resName" auto-complete="off" class="inputInline" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span='8' >
                <el-form-item prop="resSicon" label="菜单图标">
                  <InputTemp @on-change="onendChange"
                             :vals="dialogObj.data.form.resSicon"
                             :fileName="fileName" :filmode="filmode" :filType="filType"
                             :datasource.sysc="datasourceIcon" :keyup="keyup" :icon="isicon"></InputTemp>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span='24'>
                <el-form-item prop="resUrl" label="菜单链接">
                  <el-input v-model="dialogObj.data.form.resUrl" auto-complete="off" class="inputInline" ></el-input>
                </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span='24'>
              <el-col :span='24'>
                <el-form-item  prop="parentId" label="上级菜单" >
                  <compositeInput @setParentId="setParentId" :filterVal.sync="filterVal"></compositeInput>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span='24'>
              <!-- <el-col :span='12'>
                <el-form-item  prop="sortKey" label="排序号" >
                  <el-input v-model="dialogObj.data.form.sortKey" auto-complete="off" class="inputInline" value="number" ></el-input>
                </el-form-item>
              </el-col> -->
              <el-col :span='12'>
                <el-form-item prop="status" label="状态">
                  <el-radio-group v-model="dialogObj.data.form.status">
                    <el-radio-button label="启用"></el-radio-button>
                    <el-radio-button label="停用"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
        <div v-if= "dialogObj.data.form.rowId === '' || dialogObj.data.form.rowId === undefined" slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="resetForm('query')">取 消</el-button>
          <el-button type="primary" @click="submitForm('query')">确 定</el-button>
        </div>
        <div v-if= "dialogObj.data.form.rowId !== '' && dialogObj.data.form.rowId !== undefined" slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="resetForm('query')">取 消</el-button>
          <el-button type="primary" @click="updateForm('query')">确 定</el-button>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import InputTemp from '@/views/components/filter/InputTemp.vue'
  import uploadTemp from '@/views/components/Popup/uploadTemp.vue'
  import DatePickerTemp from '@/views/components/DatePicker/DatePickerTemp.vue'
  import compositeInput from './compositeInput.vue'
  import api from '@/api'
  export default {
    props: ['dialogObj'],
    data () {
      let checkIcon = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择菜单图标'))
        }
      }
      return {
        dialogVisible: false,
        formLabelWidth: '120px',
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        filmode: 0,  // 过滤方式；0:代表本地过滤，1：服务器过滤
        filType: 0, // 过滤类型；0：单列数据过滤，1：整条数据过滤
        fileName: ['value'],
        keyup: true, // 输入筛选；true：之前展示；false：之后展示,
        isicon: true,
        date: 'date',
        companyDateSource: [], // 数据源
        departmentDateSource: [], // 数据源
        datasourceIcon: [],
        filterVal: '',
        addrules: {
          resCode: [
            {required: true, message: '请输入菜单代码', trigger: 'blur'}
          ],
          resName: [
            {required: true, message: '请输入菜单名称', trigger: 'blur'}
          ],
          resSicon: [
            {required: true, validator: checkIcon}
          ],
          resUrl: [
            {required: false, message: '请输入菜单链接', trigger: 'blur'}
          ],
          parentId: [
            {required: false, message: '请选择上级菜单', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      submitForm (formName) {
        var resName = this.dialogObj.data.form.resName
        var resSicon = this.dialogObj.data.form.resSicon

        if (!resName || !resSicon) {
          alert('请填写必填项')
          return false
        } else {
          this.$emit('insertModule', this.dialogObj)
        }
      },
      updateForm (formName) {
        var resName = this.dialogObj.data.form.resName
        var resSicon = this.dialogObj.data.form.resSicon

        if (!resName || !resSicon) {
          alert('请填写必填项')
          return false
        } else {
          this.$emit('updateModule', this.dialogObj)
        }
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.dialogObj.dialogVisible = false
      },
      confirm () {
        this.dialogObj.dialogVisible = false
        this.$emit('confirmBack', this.dialogObj)
      },
      cancel () {
        this.dialogObj.dialogVisible = false
      },
      _upload_submit () {
        this.$refs.uploadTemp.submitUpload()
      },
      onendChange (val) {
        if (this.dialogObj !== undefined && this.dialogObj.data !== undefined) {
          this.dialogObj.data.form.resSicon = JSON.parse(val).value
        }
      },
      startTime (val) {
        this.dialogObj.data.form.date = val
      },
      loadAll () {
      },
      setParentId (value) {
        this.dialogObj.data.form.parentId = value
      },
      loadIcon () {
        api.requestLocal('static/json/icon.json')
          .then((response) => {
            if (Number(response.data.status) === 200) {
              this.datasourceIcon = response.data.data
            }
          })
      .catch((error) => {
        console.log(error)
      })
      }

    },
    mounted () {
      // 请求aja
      this.filterVal = this.dialogObj.data.form.parentName
      this.loadIcon()
    },
    updated () {
      this.filterVal = this.dialogObj.data.form.parentName
    },
    components: {
      InputTemp, uploadTemp, DatePickerTemp, compositeInput
    },
    computed: {
      size: function () {
        if (this.dialogObj.type === 'menuMaintenance') {
          return 'tiny'
        }
        return 'small'
      }
    }
  }
</script>

