<template>
  <div class="table-bottom medaddress">
    <div class="header-about flex-vertical-center-l flex-wrap" v-if="container_i!=2">
      <div class="item flex-vertical-center-l">
        <!-- 代煎 -->
        <div
          class="daijiao-check flex flex-row-left flex-col-center"
          @click="changeDaijian(null)"
          v-if="container_i==0 && isShowDj"
        >
          <div :class="['img-body',form.isDaiJian==1?'active':'']">
            <img src="~@/assets/new-icon/checked.png" alt v-if="form.isDaiJian==1" />
          </div>
          <span>代煎</span>
        </div>

        <div
          class="daijiao-check flex flex-row-left flex-col-center"
          @click="changePeiSong(null)"
          v-if="isShowPs || container_i==1"
        >
          <div :class="['img-body',form.radio==0?'active':'']">
            <img src="~@/assets/new-icon/checked.png" alt v-if="form.radio==0" />
          </div>
          <span>配送</span>
        </div>
      </div>
      <template v-if="isShowPs || container_i==1">
        <div class="item flex-vertical-center-l" v-if="form.radio==0">
          <span>收货人：</span>
          <div class="div3">
            <el-input size="mini" placeholder="请输入" v-model="form.savename"></el-input>
          </div>
        </div>
        <div class="item flex-vertical-center-l" v-if="form.radio==0">
          <span>电话：</span>
          <div class="div5">
            <el-input size="mini" placeholder="请输入" v-model="form.phone"></el-input>
          </div>
        </div>
        <div class="item flex-vertical-center-l flex-wrap" v-if="form.radio==0">
          <span>地址：</span>
          <div class="city1 city">
            <el-select size="mini" v-model="form.province" placeholder="选择省" @change="proC($event)">
              <el-option
                :label="item.name"
                :value="item.code"
                v-for="(item,index) in provinceList"
                :key="'m'+index"
              ></el-option>
            </el-select>
          </div>
          <div class="city1 city">
            <el-select size="mini" v-model="form.city" placeholder="选择市" @change="cityC($event)">
              <el-option
                :label="item.name"
                :value="item.code"
                v-for="(item,index) in cityList"
                :key="'n'+index"
              ></el-option>
            </el-select>
          </div>
          <div class="city1 city">
            <el-select size="mini" v-model="form.area" placeholder="选择区">
              <el-option
                :label="item.name"
                :value="item.code"
                v-for="(item,index) in areaList"
                :key="'o'+index"
              ></el-option>
            </el-select>
          </div>
          <!-- div4 -->
          <div class="city1 city">
            <el-input size="mini" placeholder="请输入详细地址" v-model="form.address"></el-input>
          </div>
        </div>
        <div class="right flex-center" v-if="form.radio ==0" @click="getAddressForHospital">寄到本院</div>
      </template>
      <!-- 数据会更新到这个组件里面 -->
    </div>
  </div>
</template>
<script>
import { getProver, getArea, getPatAddress } from "@/api/city.js";
import { getAddressForHospital } from "@/api/diagnosis.js";

import { mapGetters } from "vuex";
export default {
  props: {
    container_i: {
      type: Number,
      default: 0
    },
    isShowDj: {
      type: Boolean,
      default: true
    },
    isShowPs: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      form: {
        isDaiJian: 1, // 1是 0 否
        radio: 1, // 是否配送  0:是 1:否
        savename: "",
        phone: "",
        province: "",
        city: "",
        area: "",
        address: ""
      },
      provinceList: [],
      cityList: [],
      areaList: []
    };
  },
  watch: {
    isShowDj: {
      immediate: true,
      deep: true,
      handler: function() {
        if (!this.isShowDj) {
          this.changeDaijian(0);
        } else {
          this.changeDaijian(1);
        }
      }
    },
    isShowPs: {
      immediate: true,
      deep: true,
      handler: function() {
        if (!this.isShowPs) {
          this.changePeiSong(1);
        }
      }
    }
  },
  mounted() {
    this.getProver();
  },
  computed: {
    ...mapGetters(["getuserinfo", "getPatiensInfo"])
  },
  methods: {
    //   配送点击
    changePeiSong(data = null) {
      if (data === null) {
        this.form.radio = this.form.radio == 1 ? 0 : 1;
      } else {
        this.form.radio = data;
      }

      this.getaddress(this.form.radio);
      this.$emit("psChange", this.form.radio);
    },
    // 代煎选项点击
    changeDaijian(data = null) {
      if (data === null) {
        this.form.isDaiJian = this.form.isDaiJian == 1 ? 0 : 1;
      } else {
        this.form.isDaiJian = data;
      }

      this.$emit("djChange", this.form.isDaiJian);
    },

    // 是否配送
    getaddress(e) {
      if (e == 1) {
        this.form.address = "";
        this.form.savename = "";
        this.form.phone = "";
        this.form.province = "";
        this.form.city = "";
        this.form.area = "";
      } else {
        this.getPatAddress();
      }
    },
    // 获取省数据
    async getProver() {
      let res = await getProver();
      if (res.ResultCode == 0) {
        this.provinceList = res.Data;
      }
    },
    // 获取市数据
    async getArea(code, type) {
      let res = await getArea(code);
      if (res.ResultCode == 0) {
        if (type == 1) {
          this.cityList = res.Data;
        } else {
          this.areaList = res.Data;
        }
      }
    },
    // 获取患者地址信息
    async getPatAddress() {
      if (!this.getPatiensInfo.basisPatient.pid) return;
      let res = await getPatAddress({
        patId: this.getPatiensInfo.basisPatient.pid
      });
      if (res.ResultCode == 0) {
        this.form.address = res.Data.detailadress;
        this.form.savename = res.Data.name;
        this.form.phone = res.Data.phone;
        this.form.province = res.Data.province;
        this.form.city = res.Data.city;
        this.form.area = res.Data.district;

        this.getArea(res.Data.province, 1);
        this.getArea(res.Data.city, 2);
      }
    },
    // 获取寄到本院地址数据
    async getAddressForHospital() {
      let res = await getAddressForHospital({});
      if (res.ResultCode == 0) {
        this.form.province = res.Data.province;
        this.form.city = res.Data.city;
        this.form.area = res.Data.district;

        this.getArea(res.Data.province, 1);
        this.getArea(res.Data.city, 2);

        this.form.address = res.Data.adressdetail;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.table-bottom {
  // position: absolute;
  // bottom: 80px;
  // right: 0;
  // left: 0;
  padding: 0 10px;
  // margin-top: 241px;
  margin-top: 5px;
  z-index: -1;
  min-height: 28px;
  margin-bottom: 5px;

  .header-about {
    height: 100%;
    .item {
      margin-right: 5px;
      //   margin-bottom: 8px;

      span {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #333333;
      }

      .div1 {
        width: 40px;
      }

      .div2 {
        width: 72px;
      }

      .city1 {
        width: 140px;
      }

      .div3 {
        width: 70px;
      }

      .div4 {
        width: 160px;
      }

      .div5 {
        width: 88px;
      }

      .input-suffix {
        line-height: 28px;
      }
    }

    .right {
      width: 62px;
      height: 26px;
      background: #ffae45;
      border-radius: 4px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      //   margin-bottom: 10px;
      cursor: pointer;
    }
  }
}

.daijiao-check {
  margin-right: 8px;

  .img-body {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    font-size: 0;

    img {
      width: 14px;
      height: 14px;
    }
  }

  .active {
    border: 0px solid #5386f6;

    img {
      width: 17px;
      height: 17px;
    }
  }

  span {
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
  }
}

::v-deep {
  .el-input__inner {
    padding: 0 5px;
  }
}
</style>