<template>
  <div class="add-dialog-component">
    <Form ref="addForm" label-width="150px" :rules="rules" :model="formParams">
      <Tabs v-model="activeName">
        <tab-pane label="授权信息" name="authorize">
          <form-item label="店铺名称" prop="name">
            <Input
              v-model="formParams.name"
              size="medium"
              placeholder="请输入店铺名称"
              maxlength="30"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="店铺负责人" prop="duty">
            <Input
              v-model="formParams.duty"
              size="medium"
              placeholder="请输入店铺负责人"
              maxlength="50"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="联系电话">
            <Input
              v-model="formParams.contactTel"
              size="medium"
              placeholder="请输入联系电话"
              maxlength="50"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="联系地址">
            <Input
              v-model="formParams.address"
              size="medium"
              placeholder="请输入联系地址"
              maxlength="50"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="生效日期" prop="startTime">
            <date-picker
              v-model="formParams.startTime"
              size="medium"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请输入生效日期"
            />
          </form-item>
          <form-item label="生效时限(年)" prop="expireLimitYear">
            <Input
              v-model="formParams.expireLimitYear"
              size="medium"
              placeholder="请输入生效时限"
              maxlength="4"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="合同状态">
            <Select v-model="formParams.status.code" size="mini">
              <Option label="有效" value="NORMAL" />
              <Option label="无效" value="FORBIDDEN" />
            </Select>
          </form-item>

          <form-item label="收单类型">
            <Select v-model="formParams.posType.code" size="mini">
              <Option label="普通餐饮" value="NORMALSTORE" />
              <Option label="快消奶茶" value="FASTSTORE" />
              <Option label="零售店" value="RETAILSTORE" />
            </Select>
          </form-item>

          <form-item size="large">
            <Button type="primary" @click="next">下一步</Button>
            <Button @click="close">取消</Button>
          </form-item>
        </tab-pane>
        <tab-pane label="账户信息" name="account">
          <form-item label="账号" prop="mobile">
            <Input
              v-model="formParams.mobile"
              size="medium"
              placeholder="账号"
              maxlength="11"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="密码" prop="password">
            <Input
              v-model="formParams.password"
              size="medium"
              type="password"
              placeholder="请输入密码"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="确认密码" prop="confirmPassword">
            <Input
              v-model="formParams.confirmPassword"
              size="medium"
              type="password"
              placeholder="请再次输入密码"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item size="large">
            <Button type="primary" :loading="addLoading" @click="onSubmit">保存</Button>
            <Button @click="close">取消</Button>
          </form-item>
        </tab-pane>
      </Tabs>
    </Form>
  </div>
</template>
<script>
import Management from '@/api/Management.js'
import { Tabs, TabPane, Form, FormItem, Input, Button, Select, Option, DatePicker } from 'element-ui'
export default {
  components: {
    Tabs,
    TabPane,
    Form,
    FormItem,
    Input,
    Button,
    Select,
    Option,
    DatePicker
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        console.log(reg.test(value))
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'))
      } else {
        const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
        console.log(reg.test(value))
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('中英文混合6-20位，区分大小写'))
        }
      }
    }
    const checkConfirmPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('确认密码不能为空'))
      } else if (value !== this.formParams.password) {
        callback(new Error('两次输入密码不一致!'))
      }
      callback()
    }
    const isEmpty = (rule, value, callback) => {
      if (!value) {
        this.activeName = 'authorize'
        return callback(new Error('手机号不能为空'))
      }
      callback()
    }
    return {
      activeName: 'authorize',
      formParams: {
        posType: {
          code: 'NORMALSTORE'
        },
        status: {
          code: 'NORMAL'
        }
      },
      addLoading: false,
      rules: {
        name: [
          { required: true, validator: isEmpty, message: '请输入店铺名称', trigger: ['blur', 'change'] }
        ],
        startTime: [
          { type: 'date', required: true, validator: isEmpty, message: '请输入生效日期', trigger: ['blur', 'change'] }
        ],
        expireLimitYear: [
          { required: true, validator: isEmpty, message: '请输入生效日期', trigger: ['blur', 'change'] }
        ],
        mobile: [
          { required: true, validator: checkPhone, message: '请输入11位数手机号', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, validator: checkPassword, message: '中英文混合6-20位，区分大小写', trigger: ['blur', 'change'] },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: ['blur', 'change'] },
          { required: true, validator: checkConfirmPassword, trigger: ['blur'] }
        ]
      }
    }
  },
  methods: {
    open() {
      this.resetForm()
    },
    close() {
      this.$emit('close')
    },
    next() {
      this.activeName = 'account'
    },
    onSubmit() {
      console.log(this.formParams)
      const addForm = this.$refs.addForm
      addForm.validate((valid) => {
        if (valid) {
          this.addManagement()
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$emit('close')
      this.activeName = 'authorize'
      this.$refs.addForm && this.$refs.addForm.resetFields()
    },
    async addManagement() {
      const vm = this
      vm.addLoading = true
      Management.addTenant(vm.formParams).then((res) => {
        vm.addLoading = false
        // const resData = res.data
        vm.addLoading = false
        // if (resData.code === 0) {
        vm.resetForm()
        vm.$message({
          message: '创建成功！',
          type: 'success'
        })
        // }
      })
    }
  }
}
</script>
<style lang="less">
  .add-dialog-component {
    .tree-box {
      .el-tree-node__content {
        margin-bottom: 15px;
        height: auto;
      }
    }
  }
</style>
<style lang="less" scoped>
  .add-dialog-component {
    padding: 15px 20px;
    max-height: 80vh;
    overflow: auto;

    .tree-box {
      margin: 15px 0;

      .custom-tree-node {
        display: flex;
        width: 100%;
        text-align: left;

        .content {
          flex: 1;

        }

        .setting-box {
        }
      }
    }

    .add-btn-wrap {
      text-align: center;
    }
  }
</style>
