<template>
  <div>
    <el-form
      :model="inputQuery"
      :rules="rules"
      ref="inputQuery"
      label-width="100px"
    >
      <el-card class="el-card">
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>企业名称:&nbsp;</span>
              </div>
              <el-form-item prop="companyName">
                <el-input
                  style="width: 80%"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="inputQuery.companyName"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>统一社会信用代码:&nbsp;</span>
              </div>
              <el-form-item prop="creditNum">
                <el-input
                  style="width: 80%"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="inputQuery.creditNum"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>所属地区:&nbsp;</span>
              </div>
              <el-form-item prop="area">
                <el-cascader
                  size="small"
                  :options="options"
                  v-model="selectedOptions"
                  placeholder="请选择所属地区"
                  style="width: 70%"
                  @change="handleSZDQChange"
                >
                </el-cascader>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>详细地址:&nbsp;</span>
              </div>
              <el-form-item prop="detailAddr">
                <el-input
                  style="width: 80%"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="inputQuery.detailAddr"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>企业类型:&nbsp;</span>
              </div>
              <el-form-item prop="classes">
                <el-select
                  size="small"
                  v-model="inputQuery.classes"
                  placeholder="企业类别"
                >
                  <el-option label="生产企业" value="1"></el-option>
                  <el-option label="流通企业" value="2"></el-option>
                  <el-option label="医疗机构" value="3"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>联系人:&nbsp;</span>
              </div>
              <el-form-item prop="contacts">
                <el-input
                  style="width: 80%"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="inputQuery.contacts"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>邮箱:&nbsp;</span>
              </div>
              <el-form-item prop="email">
                <el-input
                  style="width: 80%"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="inputQuery.email"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>联系电话:&nbsp;</span>
              </div>
              <el-form-item prop="tel">
                <el-input
                  style="width: 80%"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="inputQuery.tel"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>手机:&nbsp;</span>
              </div>
              <el-form-item prop="mobile">
                <el-input
                  style="width: 80%"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="inputQuery.mobile"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="el-card">
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="20" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>应用码(APPID):&nbsp;</span>
              </div>
              <el-form-item prop="appId">
                <el-input
                  style="width: 400px"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="inputQuery.appId"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="20" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>授权码(APPSecret):&nbsp;</span>
              </div>
              <el-form-item prop="appSecret">
                <el-input
                  style="width: 400px"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="inputQuery.appSecret"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <div style="text-align: center">
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="search"
            style="margin-top: 20px; width: 200px"
            @click="onModifySubmit('inputQuery')"
            >保 存</el-button
          >
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getCompany, modifyComapny } from "../../api/warehouse/company";
import store from "../../store/index";
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
export default {
  data() {
    return {
      inputQuery: {
        companyName: "",
        bussinessStatus: "",
        creditNum: "",
        classes: "",
        area: "",
        areaCode:"",
        detailAddr: "",
        contacts: "",
        mobile: "",
        tel: "",
        email: "",
        appId: "",
        appSecret: "",
        customerId: store.getters.customerId,
      },
      options: regionDataPlus,
      selectedOptions: [],
      rules: {
        companyName: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
        creditCode: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        category: [
          {
            required: true,
            message: "请选择企业类型",
            trigger: "change",
          },
        ],

        appId: [
          {
            required: true,
            message: "请输入应用码",
            trigger: "blur",
          },
        ],

        appSecret: [
          { required: true, message: "请输入授权码", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    onModifySubmit(formName) {
      this.loading = true;
      modifyComapny(this.inputQuery).then((response) => {
        this.getData();
        this.loading = false;
        this.$message.success("修改成功");
      });
    },
    //选择所在地区
    handleSZDQChange(value) {
      this.inputQuery.area =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
      this.inputQuery.areaCode = value.toString();
      console.log(value + "\n" + this.registertDetail.SZSF);
    },

    getData() {
      this.loading = true;
      let tquery = {
        customerId: store.getters.customerId,
      };
      getCompany(tquery).then((response) => {
        this.loading = false;
        this.inputQuery = response.data;
         this.selectedOptions = this.inputQuery.areaCode.split(",");
        this.inputQuery.bussinessStatus = this.inputQuery.bussinessStatus + "";
      });
    },
  },
};
</script>
<style>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 120px;
}

.text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}
.el-card {
  margin-right: 20px;
  margin-top: 15px;
  /*transition: all .5s;*/
}

.el-row {
  display: flex;
  flex-wrap: wrap;
}
.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
</style>