<!--  -->
<template>
  <div class="addFactory wrapper_1200">
    <div class="router-tips">
      <nuxt-link to="/">首页></nuxt-link>
      <nuxt-link :to="{ path: '/user', query: { types: 0 } }">个人中心></nuxt-link>
      <span>{{ isEdit ? "修改" : "新增" }}</span>
    </div>

    <div class="cont">
      <div class="title">上传资质</div>
      <div class="form">
        <el-form
          :model="zzform"
          label-position="top"
          :rules="rules"
          ref="zzform"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="title">
                <el-input
                  v-model="zzform.title"
                  placeholder="请填写公司或店铺名称"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="编号" prop="store_code">
                <el-input v-model="zzform.store_code" placeholder="请填写编号"></el-input>
              </el-form-item> -->
              <el-form-item label="店铺类型" prop="store_type">
                <el-input
                  v-model="zzform.store_type"
                  placeholder="请填写店铺类型"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="contacts">
                <el-input v-model="zzform.contacts" placeholder="请填写联系人"></el-input>
              </el-form-item>
              <el-form-item label="电话号码" prop="phone">
                <el-input v-model="zzform.phone" placeholder="请填写电话号码"></el-input>
              </el-form-item>
              <el-form-item label="电子邮箱">
                <el-input v-model="zzform.email" placeholder="请填写电子邮箱"></el-input>
              </el-form-item>

              <el-form-item label="店铺地址">
                <el-input
                  style="margin-top: 10px"
                  v-model="zzform.address"
                  placeholder="详细地址，如四川省成都市天府三街99号"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="备注">
                <el-input type="textarea" :rows="3" placeholder="请填写内容" v-model="zzform.remarks"></el-input>
              </el-form-item>-->
              <el-form-item label="所属地" prop="district_id">
                <el-select
                  style="width: 30%; margin-right: 16px"
                  v-model="zzform.province_id"
                  placeholder="省/直辖市"
                  @change="change($event, 1)"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>

                <el-select
                  style="width: 30%; margin-right: 16px"
                  v-model="zzform.city_id"
                  @change="change($event, 2)"
                  placeholder="市/区"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  style="width: 30%"
                  v-model="zzform.district_id"
                  placeholder="区/县"
                >
                  <el-option
                    v-for="item in districtList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="营业执照或医疗机构许可证：请上传营业执照"
                prop="license"
              >
                <UploadImage1
                  @input="uploadSccess($event, 'license')"
                  :value="zzform.license"
                  :limit="2"
                >
                  <template v-slot:upload>
                    <div class="upload">
                      <img src="~assets/images/downloadIMG.png" />

                      <span>上传照片</span>
                    </div>
                  </template>
                </UploadImage1>
                <p class="tipt">文件大小不超过10M，支持JPG,PNG,JPEG格式</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="药品经营许可证：请上传营业执照" prop="drugs_license">
                <UploadImage1
                  @input="uploadSccess($event, 'drugs_license')"
                  :value="zzform.drugs_license"
                  :limit="2"
                >
                  <template v-slot:upload>
                    <div class="upload">
                      <img src="~assets/images/downloadIMG.png" />

                      <span>上传照片</span>
                    </div>
                  </template>
                </UploadImage1>
                <p class="tipt">文件大小不超过10M，支持JPG,PNG,JPEG格式</p>
              </el-form-item>
              <el-form-item label="法人身份证：请上传法人身份证" prop="card_images">
                <UploadImage1
                  :limit="2"
                  @input="uploadSccess($event, 'card_images')"
                  :value="zzform.card_images"
                >
                  <template v-slot:upload>
                    <div class="upload">
                      <img src="~assets/images/downloadIMG.png" />

                      <span>上传照片</span>
                    </div>
                  </template>
                </UploadImage1>
                <p class="tipt">文件大小不超过10M，支持JPG,PNG,JPEG格式</p>
              </el-form-item>
              <el-form-item label="法人委托书：请上传法人委托书" prop="trust_book_images">
                <UploadImage1
                  :limit="2"
                  @input="uploadSccess($event, 'trust_book_images')"
                  :value="zzform.trust_book_images"
                >
                  <template v-slot:upload>
                    <div class="upload">
                      <img src="~assets/images/downloadIMG.png" />

                      <span>上传照片</span>
                    </div>
                  </template>
                </UploadImage1>
                <p class="tipt">文件大小不超过10M，支持JPG,PNG,JPEG格式</p>
              </el-form-item>
              <el-form-item label="发票信息：请上传发票信息">
                <UploadImage1
                  @input="uploadSccess($event, 'invoice_images')"
                  :value="zzform.invoice_images"
                >
                  <template v-slot:upload>
                    <div class="upload">
                      <img src="~assets/images/downloadIMG.png" />

                      <span>上传照片</span>
                    </div>
                  </template>
                </UploadImage1>
                <p class="tipt">文件大小不超过10M，支持JPG,PNG,JPEG格式</p>
              </el-form-item>
              <el-form-item>
                <div
                  style="
                    display: flex;
                    justify-content: flex-end;
                    width: 290px;
                    margin-top: 200px;
                  "
                >
                  <el-button size="small" @click="clickBack" type="info">返回</el-button>

                  <el-button size="small" type="primary" @click="submitForm('zzform')"
                    >完成</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Setting from "~/setting";
import areaList from "@/mixins/areaList";
export default {
  name: "addFactory",
  auth: false,
  //import引入的组件需要注入到对象中才能使用
  components: {},
  mixins: [areaList],
  data() {
    //这里存放数据
    return {
      imgUrl: Setting.uplodBaseURL,
      isEdit: false,
      provinceList: [], //省列表
      cityList: [], //市列表
      districtList: [], //区列表
      zzform: {
        title: "", //店铺名称
        store_code: "", //店铺编号
        store_type: "", //店铺类型
        contacts: "", //联系人
        phone: "", //电话号码
        email: "", //电子邮箱
        province_id: "", //省份id
        district_id: "", //区县id
        city_id: "", //城市id
        address: "", //地址
        license: "", //营业执照
        drugs_license: "", //药品经营许可证
        card_images: "", //身份证正反面照片
        trust_book_images: "", //法人委托书
        invoice_images: "", //发票信息
        // remarks: "" //备注
      },
      rules: {
        title: {
          required: true,
          message: "请填写公司或店铺名称",
          trigger: "blur",
        },
        contacts: {
          required: true,
          message: "请填写联系人",
          trigger: "blur",
        },
        phone: {
          required: true,
          message: "请填写电话号码",
          trigger: "blur",
        },

        store_code: {
          required: true,
          message: "请填写店铺编号",
          trigger: "blur",
        },
        store_type: {
          required: false,
          message: "请填写店铺类型",
          trigger: "blur",
        },

        province_id: {
          required: true,
          message: "请选择所属地",
          trigger: "change",
        },
        district_id: {
          required: true,
          message: "请选择所属地",
          trigger: "change",
        },
        city_id: {
          required: true,
          message: "请选择所属地",
          trigger: "change",
        },
        license: {
          required: true,
          message: "请上传营业执照",
          trigger: "change",
        },
        drugs_license: {
          required: true,
          message: "请上传药品经营许可证",
          trigger: "change",
        },
        card_images: {
          required: true,
          message: "请上传身份证正反面照片",
          trigger: "change",
        },
        trust_book_images: {
          required: false,
          message: "请上传法人委托书",
          trigger: "change",
        },
        invoice_images: {
          required: false,
          message: "请上传发票信息",
          trigger: "change",
        },
      },
    };
  },
  async asyncData({ app }) {
    let [provinceList] = await Promise.all([
      // 省市区
      app.$axios.post("/address/lists"),
    ]);
    return {
      provinceList: provinceList.data,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.$route.query.isEdit) {
      this.isEdit = JSON.parse(this.$route.query.isEdit);
      console.log(this.isEdit);
      this.getData(this.$route.query.id);
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    // 修改时根据id查询药店信息
    getData(id) {
      let obj = {
        id,
      };
      this.$axios
        .post(`/member/getStoreInfo`, obj)
        .then((res) => {
          this.zzform = res.data;
          console.log(this.zzform);
          this.getAreaData(res.data.province_id, 1);
          this.getAreaData(res.data.city_id, 2);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    submitForm(zzform) {
      this.$refs[zzform].validate((valid) => {
        if (valid) {
          // 修改
          if (this.isEdit) {
            let obj = { ...this.zzform };
            this.$axios
              .post(`/member/editStore`, obj)
              .then((res) => {
                this.$message.success(res.message);
                this.$router.push({ path: `/user` });
              })
              .catch((err) => {
                this.$message.error(err.message);
              });
          }
          //新增
          else {
            let obj = { ...this.zzform };
            this.$axios
              .post(`/member/addStore`, obj)
              .then((res) => {
                this.$message.success(res.message);
                this.$router.push({ path: `/user` });
              })
              .catch((err) => {
                this.$message.error(err);
              });
          }
        } else {
          return false;
        }
      });
    },
    uploadSccess(e, key) {
      this.zzform[key] = e;
      this.$refs.zzform.validateField(key);
    },
    clickBack() {
      this.$router.go(-1);
    },
    // 获取市区
    change(pid, i) {
      console.log(pid, i);
      this.$axios
        .post("/address/lists", {
          pid,
        })
        .then((res) => {
          if (i == 1) {
            this.cityList = res.data;
            this.zzform.city_id = "";
            this.zzform.district_id = "";
          }
          if (i == 2) {
            this.districtList = res.data;
            this.zzform.district_id = "";
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
// @import"~assets/theme/element-variables.scss";

::v-deep {
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 32px;
  }
  .el-form-item__label {
    line-height: 32px;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .el-form-item__label {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666;
    padding: 0;
  }
}
.addFactory {
  .router-tips {
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    a {
      color: #333;
    }
    span {
      color: #999999;
    }
  }
  .cont {
    //     width: 1200px;
    // height: 1128px;
    padding: 20px;
    background: #ffffff;
    border-radius: 4px;
    .el-form-item {
      width: 70%;
      margin-top: 10px;
      .upload {
        width: 290px;
        height: 111px;
        border-radius: 4px;
        border: 1px solid #dddddd;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 22px;
          height: 20px;
        }
        span {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #cccccc;
        }
      }
      p {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
        margin-top: -10px;
      }
    }
    .title {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      border-bottom: 1px solid #eee;
      padding-bottom: 19px;
    }
  }
}
</style>
