<template>
  <div>
    <a-modal
      centered
      class="modalBox"
      :footer="null"
      :title="titleText"
      v-model="isshow"
      @cancle="cancel"
      :width="900">
      <a-form :form="form" ref="form" @submit="handleSubmit">
        <a-row :gutter="24">
          <a-col :span="12">
            <!-- 企业名称 -->
            <a-form-item label="企业名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-input
                allowClear
                :maxLength="30"
                v-decorator="['formData.name', { initialValue: formData.name,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入企业名称!' }] }]"
                placeholder="请输入企业名称(最多30个字符)"
              />
            </a-form-item>
          </a-col>
          <!-- 企业编码 -->
          <!-- 本次迭代先隐藏 -->
          <!-- <a-col :span="12">
            <a-form-item label="企业编码:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-input allowClear :maxLength="30" v-decorator="['formData.bizCode', { initialValue: formData.bizCode,getValueFromEvent: $filterEmpty }]" placeholder="请输入企业编码" />
            </a-form-item>
          </a-col> -->
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <!-- 负责人名称 -->
            <a-form-item label="负责人名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-input allowClear :maxLength="30" v-decorator="['formData.contactName', { initialValue: formData.contactName,getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入负责人名称(最多30个字符)" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 负责人手机 -->
            <a-form-item label="负责人手机:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-input
                allowClear
                :disabled="itemId?true:false"
                :maxLength="11"
                v-decorator="[
                  'formData.contactPhone',
                  { initialValue: formData.contactPhone, rules: [{ required: true, message: '请输入负责人手机号!' }, { pattern: /^\d{11}$/, message: '请输入正确的负责人手机号' }] }
                ]"
                placeholder="请输入负责人手机"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <!-- 使用有效期至 -->
            <a-form-item label="使用有效期至:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-date-picker
                style="width: 100%;"
                :disabled-date="disabledDate"
                @change="expireDateChange"
                placeholder="年/月/日"
                v-decorator="['formData.expireDate', { initialValue: formData.expireDate, rules: [{ type: 'object', required: true, message: '请选择使用有效期!' }] }]"
              />
              <p>
                常选：
                <span class="time-text" @click="timeFilter(3)">3天</span>
                <span class="time-text" @click="timeFilter(30)">1个月</span>
                <span class="time-text" @click="timeFilter(365)">1年</span>
              </p>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 启用状态 -->
            <a-form-item label="启用状态:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-radio-group @change="onStatusChange" v-decorator="['formData.status', { initialValue: formData.status, rules: [{ required: true, message: '请选择启用状态!' }] }]">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <!-- 使用权限 -->
            <a-form-item label="使用权限:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <v-select
                ref="orgType"
                allowClear
                @change="scopeTypeChange"
                v-decorator="['formData.scopeType', { initialValue: formData.scopeType, rules: [{ required: true, message: '请选择使用权限!' }] }]"
                code="STORE_AUTH_TYPE"
              ></v-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <!-- 地址 -->
          <a-col span="9">
            <a-form-item label="地址:" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-select @change="getCityList" v-decorator="['formData.addrProvince', { initialValue: formData.addrProvince, rules: [] }]" placeholder="请选择省">
                <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col span="7">
            <a-form-item prop="addrCity">
              <a-select v-decorator="['formData.addrCity', { initialValue: formData.addrCity, rules: [] }]" @change="getAreaList" placeholder="请选择市">
                <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col span="7">
            <a-form-item prop="addrDistrict">
              <a-select v-decorator="['formData.addrDistrict', { initialValue: formData.addrDistrict, rules: [] }]" @change="areaCharged" placeholder="请选择区/县">
                <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="17">
            <!-- 详细地址 -->
            <a-form-item label="详细地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
              <a-input :maxLength="30" allowClear placeholder="请输入详细地址(最多30个字符)" v-decorator="['formData.addrDetail', { initialValue: formData.addrDetail,getValueFromEvent: $filterEmpty, rules: [] }]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
          <a-button type="primary" @click="handleSubmit()">保存</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="cancel()">取消</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { STable, VSelect } from '@/components'
import { getProvince, getCityByPro, getDistrictByCity, tenantsDetail, tenantsSave } from '@/api/tenants.js'
import moment from 'moment'
export default {
  name: 'TenantsModal',
  components: {
    STable,
    VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 要编辑的租户id
    itemId: {
      type: [String, Number],
      default: ''
    }
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        if (this.itemId) {
          this.getDetail(this.itemId)
        }
      } else {
        this.cancel()
      }
    }
  },
  data () {
    return {
      moment,
      isshow: this.visible,
      form: this.$form.createForm(this, {
        name: 'tenantsModal'
      }),
      addrProvinceList: [], // 省列表
      addrCityList: [], // 市列表
      addrDistrictList: [], // 区列表
      formData: {
        name: '', // 企业名称
        bizCode: '', // 企业编码
        contactName: '', // 负责人名称
        contactPhone: '', // 负责人电话
        expireDate: null, // 使用有效期
        scopeType: '', // 权限类型
        status: 1, // 启用状态
        addrProvince: undefined,
        addrCity: undefined,
        addrDistrict: undefined,
        addrDetail: '' // 详细地址
      }
    }
  },
  computed: {
    titleText () {
      return this.itemId ? '编辑' : '新增'
    }
  },
  mounted () {
    this.getProvinceList()
  },
  methods: {
    cancel (e) {
      this.clear()
      this.$emit('close')
    },
    // 不可选日期 今天以前日期不可选
    disabledDate (current) {
      return current && current.valueOf() < Date.now() - 86400000
    },
    pageInit () {
      this.formData = {
        name: '', // 企业名称
        bizCode: '', // 企业编码
        contactName: '', // 负责人名称
        contactPhone: '', // 负责人电话
        expireDate: null, // 使用有效期
        scopeType: '', // 权限类型
        status: 1, // 启用状态
        addrProvince: undefined,
        addrCity: undefined,
        addrDistrict: undefined,
        addrDetail: '' // 详细地址
      }
    },
    // 查详情
    getDetail (id) {
      tenantsDetail({ id: id }).then(res => {
        // console.log(res, 'rrrrrrr')
        if (res.status == 200) {
          // 获取市列表数据
          this.getCityListRequest(res.data.addrProvince)
          // 获取区列表数据
          this.getAreaListRequest(res.data.addrCity)
          this.formData = Object.assign(this.formData, res.data)
          const now = moment().add(7, 'day').format('YYYY-MM-DD')
          const expireDate = moment(now, 'YYYY-MM-DD')
          this.formData.expireDate = this.formData.expireDate ? moment(this.formData.expireDate, 'YYYY-MM-DD') : expireDate
          this.form.setFields({ 'formData.expireDate': { value: this.formData.expireDate, errors: '' } })
          this.formData.status = Number(this.formData.status)

          console.log(this.formData, 'this.formData')
        }
      })
    },
    // 获取省列表'
    getProvinceList () {
      getProvince().then(res => {
        // console.log(res, 'rrrrrrr')
        if (res.status == 200) {
          this.addrProvinceList = res.data || []
        } else {
          this.addrProvinceList = []
        }
      })
    },
    // 获取城市列表
    getCityList (val) {
      this.addrCityList = []
      this.addrDistrictList = []
      this.form.setFields({ 'formData.addrCity': { value: undefined, errors: '' } })
      this.form.setFields({ 'formData.addrDistrict': { value: undefined, errors: '' } })
      this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } })
      this.getCityListRequest(val)
    },
    getCityListRequest (val) {
      getCityByPro({
        id: val
      }).then(res => {
        if (res.status == 200) {
          this.addrCityList = res.data || []
        } else {
          this.addrCityList = []
        }
      })
    },
    // 获取区县列表
    getAreaList (val) {
      this.addrDistrictList = []
      this.form.setFields({ 'formData.addrDistrict': { value: undefined, errors: '' } })
      this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } })
      this.getAreaListRequest(val)
    },
    getAreaListRequest (val) {
      getDistrictByCity({
        id: val
      }).then(res => {
        if (res.status == 200) {
          this.addrDistrictList = res.data || []
        } else {
          this.addrDistrictList = []
        }
      })
    },
    // 区县变更
    areaCharged (val) {
      this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } })
    },
    // 有效期改变
    expireDateChange (v) {
      console.log(v)
      this.form.setFields({
        'formData.expireDate': {
          value: v,
          errors: ''
        }
      })
    },
    // 使用权限改变
    scopeTypeChange (v) {
      this.form.setFields({ 'formData.scopeType': { value: v, errors: '' } })
    },
    // 启用状态切换
    onStatusChange (v) {
      console.log(v, 'vvvvvvvvvv')
      this.formData.status = v
    },
    // 快捷时间处理
    timeFilter (time) {
      const now = moment()
        .add(time, 'day')
        .format('YYYY-MM-DD')
      this.form.setFields({
        'formData.expireDate': {
          value: moment(now, 'YYYY-MM-DD'),
          errors: ''
        }
      })
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          const params = this.itemId
            ? Object.assign(
              {
                id: this.itemId
              },
              values.formData
            )
            : values.formData
          params.expireDate = moment(params.expireDate).format('YYYY-MM-DD')
          tenantsSave(params).then(res => {
            console.log(res, 'res--save')
            if (res.status + '' === '200') {
              this.$message.success(res.message ? res.message : '保存成功')
              this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
              }, 300)
            } else {
              // this.$message.error(res.message);
            }
          })
        }
      })
    },
    clear () {
      this.form.resetFields()
      this.pageInit()
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, {
      name: 'tenantsModal'
    })
  }
}
</script>

<style>
.modalBox {
}

.ant-modal-footer {
  display: none;
}

.time-text {
  color: #1890ff;
  padding: 0px 20px;
  cursor: pointer;
}

.labelT {
  position: absolute;
  left: -135px;
  top: 20px;
  color: rgba(0, 0, 0, 0.85);
}
</style>
