<template>
  <a-modal
    class="StoreModal"
    title="编辑"
    :width="1000"
    :footer="null"
    :destroyOnClose="true"
    @cancel="isShow = false"
    v-model="isShow">
    <!-- 表单 -->
    <a-form-model
      class="form"
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }">
      <a-row :gutter="20" v-if="storeInfo">
        <a-col :span="8" class="item-w">
          <div class="item-label">门店名称：</div>
          <div class="item-cont">{{ storeInfo.name }}</div>
        </a-col>
        <a-col :span="8" class="item-w">
          <div class="item-label">门店负责人：</div>
          <div class="item-cont">{{ storeInfo.managerName }}</div>
        </a-col>
        <a-col :span="8" class="item-w">
          <div class="item-label">负责人手机：</div>
          <div class="item-cont">{{ storeInfo.managerMobile }}</div>
        </a-col>
        <a-col :span="24" class="item-w">
          <div class="item-label">地址：</div>
          <div class="item-cont">{{ storeInfo.addrProvinceName }} - {{ storeInfo.addrCityName }} - {{ storeInfo.addrDistrictName }} - {{ storeInfo.addrDetail }}</div>
        </a-col>
        <a-col :span="8" class="item-w">
          <div class="item-label">纬度：</div>
          <div class="item-cont">{{ storeInfo.lat }}</div>
        </a-col>
        <a-col :span="8" class="item-w">
          <div class="item-label">经度：</div>
          <div class="item-cont">{{ storeInfo.lng }}</div>
        </a-col>
        <a-col :span="8" class="item-w">
          <div class="item-label">营业时间：</div>
          <div class="item-cont">{{ storeInfo.beginTime }} - {{ storeInfo.endTime }}</div>
        </a-col>
        <a-col :span="8" class="item-w">
          <div class="item-label">是否自营：</div>
          <div class="item-cont">{{ storeInfo.selfFlag }}</div>
        </a-col>
        <a-col :span="8" class="item-w">
          <div class="item-label">启用状态：</div>
          <div class="item-cont">{{ storeInfo.isEnable }}</div>
        </a-col>
        <a-col :span="8">
          <a-form-model-item class="form-label" label="组织归属" prop="orgCode" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
            <a-tree-select
              showSearch
              id="store-editOrg"
              v-model="form.orgCode"
              allowClear
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="treeData"
              placeholder="请选择组织归属"
              treeNodeFilterProp="title">
            </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item class="btn-cont" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
            <a-button id="store-saveOrg" type="primary" @click="onSubmit">保存</a-button>
            <a-button id="store-cancelOrg" class="cancel" @click="isShow = false">取消</a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { Tree } from '@/components'
import { findStoreDetail, saveStoreOrg } from '@/api/store.js'
import { findOrgTree } from '@/api/atorg.js'
export default {
  components: { Tree },
  name: 'StoreModal',
  props: {
    openModal: {
      //  弹框是否展示
      type: Boolean,
      default: false
    },
    storeId: {
      //  门店id
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  弹框是否展示
      form: { //  编辑
        orgCode: null //  机构编码
      },
      rules: { //  表单校验规则
        orgCode: [{ required: true, message: '请选择所属组织归属', trigger: 'change' }]
      },
      treeData: [],
      storeInfo: null //  门店详情
    }
  },
  methods: {
    //  门店详情
    getStoreInfo (id) {
      findStoreDetail({ id: id }).then(res => {
        console.log(res, '————————')
        if (res.status == 200) {
          this.storeInfo = res.data
        }
      })
    },
    //  获取组织机构  数据
    getOrgList () {
      findOrgTree().then(res => {
        if (res.status == 200) {
          this.treeData = this.recursionFun(res.data.list)
        } else {
          this.treeData = []
        }
      })
    },
    //  递归函数
    recursionFun (data) {
      data.map(item => {
        if (item.children && item.children.length == 0) {
          item.key = item.id ? 'org' + item.id : ''
          item.value = item.id ? item.id : ''
          item.title = item.name ? item.name : ''
        } else {
          item.key = item.id ? 'org' + item.id : ''
          item.value = item.id ? item.id : ''
          item.title = item.name ? item.name : ''
          this.recursionFun(item.children)
        }
      })
      return data
    },
    //  保存
    onSubmit () {
      const _this = this
      _this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const formData = JSON.parse(JSON.stringify(_this.form))
          formData.tenantId = this.storeId
          console.log(formData)
          saveStoreOrg(formData).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$emit('success')
            } else {
              _this.$message.error(res.message)
            }
          })
        } else {
          return false
        }
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (val) {
      if (!val) {
        this.$emit('close')
      } else {
        //  重置表单数据
        this.form.orgCode = null
      }
    },
    storeId (newValue, oldValue) {
      if (newValue && this.isShow) {
        this.getOrgList()
        this.getStoreInfo(newValue)
      }
    }
  }
}
</script>

<style lang="less">
  .StoreModal{
    .form{
      .item-w{
        display: flex;
        line-height: 24px;
        padding: 8px 0;
        margin-bottom: 24px;
        .item-label{
          flex-shrink: 0;
          width: 90px;
          text-align: right;
          font-weight: bold;
        }
        .item-cont{
          flex-grow: 1;
        }
      }
      .btn-cont {
        text-align: center;
        .cancel {
          margin-left: 40px;
        }
      }
      .form-label{
        .ant-form-item-label{
          .ant-form-item-required{
            font-weight: bold;
            color: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }
  }
</style>
