<template>
    <d2-container>
        <div v-if="isExpend" class="d2-fl d2-tree-view">
            <el-tree
                    ref="tree"
                    highlight-current
                    :data="treeData"
                    :default-expanded-keys="['mTop']"
                    node-key="alias"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
            >
        <span class="icon-tree" slot-scope="{ node, data }">
          <div v-if="data.alias == 'mTop'">
            <i class="fa fa-clipboard"></i>
            <span>&nbsp;{{node.label}}</span>
          </div>
          <div v-if="data.alias == 'mBut'">
            <i class="fa fa-coffee"></i>
            <span>&nbsp;{{node.label}}</span>
          </div>
        </span>
            </el-tree>
        </div>
        <div
                @click="isExpend = !isExpend"
                :class="[{'angle-view':isExpend},{'angle-view-none':!isExpend}]"
        >
            <i :class="['fa', {'fa-angle-left':isExpend},{'fa-angle-right':!isExpend}]"></i>
        </div>
        <div :class="[{'d2-fl':isExpend},{'d2-table-view':isExpend},{'d2-table-view-full':!isExpend}]">
            <div class="d2-table-view-header">
                <el-form
                        size="small"
                        :inline="true"
                        :model="filter"
                        @keyup.enter.native="handleList"
                        class="demo-form-inline"
                >
                    <el-form-item label="用户号">
                        <el-input v-model.trim="filter.userNo"/>
                    </el-form-item>
                    <el-form-item label="用户类型">
                        <el-select v-model="form.mealIds">
                            <el-option v-for=" (item,index) in lanuchs" :key="index" :label="item.mealName"
                                       :value="item.mealId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleList('1')">查询</el-button>
                    </el-form-item>

                </el-form>
            </div>
            <div class="d2-table-view-content">
                <div class="d2-table-view-handle">
                    <el-button @click="operVisible = !operVisible" size="small" icon="el-icon-plus">新增</el-button>
                </div>
                <d2-crud
                        title="用户管理列表"
                        ref="d2Crud"
                        :options="tableOptions"
                        :loading="loading"
                        :columns="columns"
                        :data="data"
                >
                </d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
            title="用户新增"
            :visible.sync="operVisible"
            @close="clearForm"
            width="50%"
            :close-on-click-modal="false">
        <el-form ref="form" :model="form" label-width="100px" labelPosition="right" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="用户账号" prop="userNo">
                        <el-input v-model.trim="form.userNo" maxlength="20"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="登陆密码" prop="password">
                        <el-input  v-model.trim="form.password" maxlength="20" type="password"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属部门" prop="mealIds">
                        <el-select v-model="form.mealIds">
                        <el-option v-for=" (item,index) in lanuchs" :key="index" :label="item.mealName"
                        :value="item.mealId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="关联人员" prop="merchantId">
                        <!--<el-input v-model.trim="form.userNm"/>-->
                        <merchant-tree v-model="filter.merchantId" ref="mtTree"></merchant-tree>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="用户类型" prop="mealIds">
                    <el-select v-model="form.mealIds">
                        <el-option v-for=" (item,index) in lanuchs" :key="index" :label="item.mealName"
                                   :value="item.mealId"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
                <el-col :span="12">
                    <el-form-item label="系统角色" prop="mealIds">
                        <el-select v-model="form.mealIds">
                            <el-option v-for=" (item,index) in lanuchs" :key="index" :label="item.mealName"
                                       :value="item.mealId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="用户描述">
                        <el-input type="textarea" maxlength="200" v-model.trim="form.remark"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button :loading="staLoading" @click="operInstance">保存</el-button>
        </span>
    </el-dialog>
    </d2-container>
</template>
<script>
  import { tableOptions } from '../../../assets/options'
  import {} from '../../../api/sys/teacher'
  export default {
    name: 'system-staff',
    components: {

    },
    data () {
      let checkPhone = (rule, value, callback) => {
        let reg = /^1[345789]\d{9}$/
        if (!reg.test(value)) {
          return callback(new Error('请输入正确的手机号码'))
        } else {
          callback ()
        }

      }
      return {
        // classVisible:false,
        staLoading: false,
        multipleSelection:[],
        cuisineIds:[],
        func: {
          add: false,
          delete: false,
          update: false,
          select: false
        },
        time: '',
        falg: true,
        isExpend: true,
        tableOptions,
        loading: false,
        operVisible: false,
        isEdit: false,
        diaLogName: '新增',
        lanuchs: [],
        form: {
          password:"123456",
          orderMealList: [],
          cuisineId: '',
          mealIds: [],
          phoneNumber:'',
          stock: '',
          cuisineCode: '',
          cuisineName: '',
          categoryId: '',
          categoryName: '',
          price: '',
          activityPrice: '',
          memberPrice: '',
          isSpicy: '',
          discountRate: '',
          cuisineImage: '',
          score: '',
          saleCount: '',
          supplyIndate: '',
          supplyTimeBucket: '',
          merchantId: '',
          merchantName: null,
          deductionTicketIds: '',
          deductionTicketNames: '',
          cuisineImage: '',
          remark: ''
        },
        orderMealList: [],
        filter: {
          limit: 10,
          page: 1,
          userNo: '',
          realNm:""
        },
        pagination: {
          total: 0
        },
        currentPage: 1,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        columns: [
          {
            title: '序号',
            key: 'index',
            minWidth: '50',
            formatter (row, column, cellValue, index) {
              return index + 1
            }
          },
          {
            title: '教工工号',
            key: 'cuisineCode',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '用户号',
            key: 'mealNames',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '教工姓名',
            key: 'cuisineName',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '用户类型',
            key: 'categoryName',
            minWidth: '120'
          },
          {
            title: '所属部门',
            key: 'price',
            minWidth: '120'
          },
          {
            title: '用户角色',
            key: 'supplyIndate',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '登记日期',
            key: 'isDelete',
            minWidth: '120',
          },
        ],
        data: [],
        rules: {
          cuisineName: [{required: true, message: '请输入菜品名称', trigger: 'blur'}],
          price: [{required: true, message: '请输入菜品价格', trigger: 'blur'}],
          merchantId: [{required: true, message: '请选择商家', trigger: 'change'}],
          supplyTimeBucket: [{required: true, message: '请选择时间段', trigger: 'change'}],
          supplyIndate: [{required: true, message: '请选择有效期', trigger: 'change'}],
          stock: [{required: true, message: '请输入库存', trigger: 'blur'}],
          mealIds:[{required: true, message: '请选择餐别', trigger: 'blur'}],
          phoneNumber: [{validator: checkPhone,required: true, trigger: 'blur',message: '请输入正确的格式'}],
        }
      }
    },

    methods: {
      handleNodeClick (data, node, com) {
        if (data.alias == 'mTop') {
          this.falg = true
        } else {
          this.falg = false
        }
        this.filter.categoryId = data.id
        this.form.categoryName = data.name
        this.form.categoryId = data.id
        this.handleList()
      },
      handleTreeNode () {
        // TreeNode({
        //   isCompany: 1
        // }).then(res => {
        //   this.treeData = JSON.parse(res.data)
        // })
        // this.handleList()
      },
      handleList (val) {
        // if (val) {
        //   this.filter.page = 1
        //   this.currentPage = 1
        // }
        // this.loading = true
        // DishPage(this.filter)
        //   .then(res => {
        //     this.loading = false
        //     this.data = res.data.rows
        //     this.pagination.total = res.data.records
        //   })
        //   .catch(err => {
        //     this.loading = false
        //   })
      },
      handleCurrentChange (val) {
        this.filter.page = val
        this.handleList()
      },
      handleSizeChange (val) {
        this.filter.page = 1
        this.filter.limit = val
        this.handleList()
      },
      operInstance () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.staLoading = true
            this.form.mealIds = this.form.mealIds.map(item => item).join(',')
            // saveOrUpdateDish(this.form)
            //   .then(res => {
            //     this.staLoading = false
            //     this.operVisible = false
            //     this.$message({
            //       message: this.form.cuisineId ? '编辑成功' : '新增成功',
            //       type: 'success'
            //     })
            //     this.handleTreeNode()
            //   })
            //   .catch(err => {
            //     this.staLoading = false
            //   })
          }
        })
      },
      dateChange(val){
        console.log(val)
        if (val == null) {
          this.time = ''
        } else {
          this.form.supplyTimeBucket = val[0] + '~' + val[1]
        }
      },
      handleClick () {},
      clearForm () {
        this.form = {
          password:'123456',
          cuisineId: '',
          cuisineCode: '',
          stock: '',
          cuisineName: '',
          categoryId: this.form.categoryId,
          categoryName: this.form.categoryName,
          price: '',
          activityPrice: '',
          memberPrice: '',
          isSpicy: '',
          discountRate: '',
          score: '',
          cuisineImage: '',
          saleCount: '',
          supplyIndate: '',
          supplyTimeBucket: '',
          merchantId: '',
          merchantName: '',
          deductionTicketIds: '',
          deductionTicketNames: '',
          cuisineImage: '',
          remark: ''
        }
        this.isEdit = false
        this.diaLogName = '新增'
      }
    },
    mounted () {
      // this.filter.limit = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions, 102)
      this.handleTreeNode()
      // getOrderMeal().then(res => {
      //   this.orderMealList = res.data
      // })
      // LanuchList({
      //   limit: 50,
      //   page: 1
      // }).then(res => {
      //   // console.log(res)
      //   this.lanuchs = res.data.rows
      // })
    }
  }
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .timeLabel label{
        width: 110px !important;
    }
    .bankLabel label{
        font-size: 13px;
    }
    .el-form-item__label {
        text-align: left !important;
    }
    .d2-table-view{
        overflow: hidden;
    }
</style>