<template>
  <el-dialog
    title="选择退货地址"
    :visible.sync="AgreeReturnvisible"
    width="800px"
    custom-class="AgreeReturn"
    :before-close="close"
  >
    <div>
      <div v-if="AgreeReturndata.ag_site_management_id !== 76">
        <div class="add" v-if="!addactive" @click="addadrdss">
          <div class="name">
            <span>新增地址</span>
          </div>
          <div class="addressinfo">
            <span>________省</span>
            <span>________市</span>
            <span>________区</span>
          </div>
        </div>
        <div class="add" v-else :class="{ active: addactive }">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <div class="top">
              <el-form-item>
                <el-input
                  class="input_w"
                  size="small"
                  v-model="form.consignee_name"
                  placeholder="请输入收货人姓名"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  class="input_w"
                  size="small"
                  v-model="form.mobile"
                  placeholder="请输入收货人电话"
                ></el-input>
              </el-form-item>
            </div>
            <el-row :gutter="10" class="bottom">
              <el-col v-for="item in inputAdd" :key="item.value" :span="4">
                <el-form-item :prop="item.value">
                  <el-select
                    v-model="form[item.value]"
                    size="small"
                    :placeholder="`请选择${item.label}`"
                    @change="selectaddress(item.label)"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="items in item.options"
                      :key="items.value"
                      :label="items.label"
                      :value="items.value"
                  /></el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item>
                  <el-input
                    size="small"
                    v-model="form.detail"
                    placeholder="请输入详细地址"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="box">
        <div
          class="addredss-box"
          :class="{ active: el.checked }"
          v-for="(el, id) in addressDate"
          :key="id"
          @click="select(el)"
        >
          <div class="name">
            <span>{{ el.consignee_name }}</span>
            <span>{{ el.mobile }}</span>
          </div>
          <div class="addressinfo">
            <span>{{ el.province }} </span>
            <span>{{ el.city }} </span>
            <span>{{ el.area }}</span>
            <span>{{ el.town }}</span>
            <span>{{ el.detail }}</span>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" size="small" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  get_after_sale_address,
  administrative_division,
  refund_after_sale,
} from "@/api/idleFish";
export default {
  
  props: ["AgreeReturnvisible", "AgreeReturndata"],
  components: {},
  data() {
    return {
      province: [],
      addressDate: [],
      inputAdd: [
        {
          options: [],
          label: "省",
          value: "province",
          placeholder: "请填写省",
        },
        { options: [], label: "市", value: "city", placeholder: "请填写市" },
        { options: [], label: "区", value: "area", placeholder: "请填写区" },
      ],
      checked: false, //选择状态
      addactive: false, //添加状态
      form: {
        consignee_name: "",
        mobile: "",
        province: "",
        city: "",
        area: "",
        town: "",
        detail: "",
      },
      post_code: "",
    };
  },
  created() {
    this.getaddress();
    this.getprovince();
  },
  methods: {
    async getaddress() {
      const res = await get_after_sale_address();
      this.addressDate = res.datas;
    },
    async getprovince() {
      const res = await administrative_division();
      this.inputAdd.forEach((item) => {
        if (item.value === "province") {
          item.options = res.datas.map((item1) => {
            return {
              label: item1.province,
              value: item1.province,
            };
          });
        }
      });
    },
    async selectaddress(row) {
      if (row === "省") {
        const res = await administrative_division({
          province: this.form.province,
        });
        console.log(res);
        this.inputAdd.forEach((item) => {
          if (item.value === "city") {
            item.options = res.datas.map((item1) => {
              return {
                label: item1.city,
                value: item1.city,
              };
            });
          }
        });
      } else if (row === "市") {
        const res = await administrative_division({
          province: this.form.province,
          city: this.form.city,
        });
        console.log(res);
        this.inputAdd.forEach((item) => {
          if (item.value === "area") {
            item.options = res.datas.map((item1) => {
              return {
                label: item1.area,
                value: item1.area,
                post_code: item1.city_id,
              };
            });
          }
        });
      } else {
        if (this.inputAdd && this.form.area) {
          this.inputAdd.forEach((item) => {
            if (item.options && item.options.some((items) => items.post_code)) {
              let res = item.options.filter(
                (item_) => item_.label === this.form.area
              );
              if (res.length > 0) {
                this.post_code = res[0].post_code;
              }
            }
          });
        }
      }
      if (this.form.province === "") {
        this.form.city = "";
        this.form.area = "";
        this.form.town = "";
        this.form.detail = "";
      } else if (this.form.city === "") {
        this.form.area = "";
        this.form.town = "";
        this.form.detail = "";
      }
    },
    close() {
      this.$emit("closeAgreeReturn");
    },
    async confirm() {
      this.form.post_code = this.post_code;
      if (!this.form.town) {
        this.form.town = "无";
      }
      const params = {
        xy_sale_after_id: this.AgreeReturndata.id,
        operation: "AGREE_RETURN",
        address_detail: this.form,
      };
      const res = await refund_after_sale(params);
      this.$emit("closeAgreeReturn");
    },
    select(data) {
      this.addactive = false;
      this.addressDate.forEach((el) => {
        el.id == data.id
          ? this.$set(el, "checked", true)
          : this.$set(el, "checked", false);
      });
      this.post_code = data.post_code; //如果使用已有地址清空id
      this.form = { ...data };
    },
    addadrdss() {
      this.addactive = true;
      this.addressDate.forEach((el) => {
        this.$set(el, "checked", false);
      });
    },
  },
};
</script>

<style scoped lang='scss'>
::v-deep .el-dialog__body {
  padding: 10px 20px 0 !important;
}
.addredss-box,
.add {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  .name {
    color: #000;
    font-weight: bold;
    font-size: 16px;
    span {
      margin-right: 10px;
    }
  }
  .addressinfo {
    color: #606266;
    font-weight: 400;
    margin-top: 10px;
    span {
      margin-right: 5px;
    }
  }
}
.addredss-box:hover {
  border: 1px solid #c0c4cc;
}
.active {
  border: 1px solid #409eff;
}
.active:hover {
  border: 1px solid #409eff;
}
.add {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 110px;
  cursor: pointer;
  span {
    color: #9e9fa1;
  }
  .addressinfo {
    color: #9e9fa1;
  }
}
::v-deep .el-form {
  .top {
    .el-form-item {
      width: 177px;
      margin-bottom: 0 !important;
      .el-input {
        width: 150px;
      }
    }
  }
  .bottom {
    .el-form-item {
      margin: 0 !important;
    }
  }
  .el-input__inner {
    border: none;
    border-bottom: 1px solid #c0c4cc;
    border-radius: 0px;
  }
}

.box {
  padding: 10px 10px 0px 10px;
  height: 400px;
  overflow-y: auto;
  margin-bottom: 10px;
  border-radius: 8px;
}
</style>