<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <van-nav-bar
      title="编辑信息"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <!--  头部结束  -->

    <!--  内容开始  -->
    <div class="main">
      <van-field label="主体名称" v-model="entityForm.entityName" input-align="right" placeholder="请输入主体名称" />

      <van-field
        readonly
        clickable
        required
        :rules="[{ required: true , message:'请选择主体类别'}]"
        v-model="statisticsTypeId"
        center
        @click="showStatisticsTypeId = true"
        right-icon="arrow-down"
        placeholder="请选择主体类别"
        label="主体类别"
        input-align="right"
      />
      <van-popup v-model="showStatisticsTypeId" position="bottom" get-container="body">
        <van-picker
          show-toolbar
          :columns="statisticsTypeIdOptions"
          @confirm="onConfirmStatisticsTypeId"
          @cancel="showStatisticsTypeId = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        required
        :rules="[{ required: true , message:'请选择生产种类'}]"
        v-model="industryClassificationType"
        center
        @click="showIndustryClassificationType = true"
        right-icon="arrow-down"
        placeholder="请选择生产种类"
        label="生产种类"
        input-align="right"
      />
      <van-popup v-model="showIndustryClassificationType" position="bottom" get-container="body">
        <van-picker
          show-toolbar
          :columns="industryClassificationTypeOptions"
          @confirm="onConfirmIndustryClassificationType"
          @cancel="showIndustryClassificationType = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        required
        :rules="[{ required: true , message:'请选择示范类型'}]"
        v-model="modelSocietyType"
        center
        @click="showModelSocietyType = true"
        right-icon="arrow-down"
        placeholder="请选择示范类型"
        label="示范类型"
        input-align="right"
      />
      <van-popup v-model="showModelSocietyType" position="bottom" get-container="body">
        <van-picker
          show-toolbar
          :columns="modelSocietyTypeOptions"
          @confirm="onConfirmModelSocietyType"
          @cancel="showModelSocietyType = false"
        />
      </van-popup>

      <van-field label="主体住址" v-model="entityForm.entityAddress" input-align="right" placeholder="请输入主体住址" />
<!--      <van-field label="数量" v-model="entityForm.entityName" input-align="right" placeholder="请输入数量" />-->

      <van-field
        readonly
        clickable
        required
        :rules="[{ required: true , message:'请选择成立时间'}]"
        v-model="entityForm.registerTime"
        center
        @click="showRegisterTime = true"
        right-icon="arrow-down"
        placeholder="请选择成立时间"
        label="成立时间"
        input-align="right"
      />
      <van-popup v-model="showRegisterTime" position="bottom" get-container="body">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          show-toolbar
          @confirm="onConfirmRegisterTime"
          @cancel="showRegisterTime = false"
        />
      </van-popup>
      <van-field label="负责人姓名" v-model="entityForm.principalName" input-align="right" placeholder="请输入负责人姓名" />
      <van-field label="联系电话" v-model="entityForm.tal" input-align="right" placeholder="请输入联系电话" />
      <van-field label="开户银行" v-model="entityForm.depositBankName" input-align="right" placeholder="请输入开户银行" />
      <van-field label="银行账号" v-model="entityForm.accountNumber" input-align="right" placeholder="请输入银行账号" />
      <van-field label="经营土地面积(亩)" v-model="entityForm.landArea" label-width="auto" input-align="right" placeholder="请输入经营土地面积(亩)" />
      <van-field label="成员出资总额" v-model="entityForm.membersContributions" input-align="right" placeholder="请输入成员出资总额" />
      <van-field label="成员个数" v-model="entityForm.manpowerNumber" input-align="right" placeholder="请输入成员个数" />
      <van-field label="非成员个数" v-model="entityForm.nonManpowerNumber" input-align="right" placeholder="请输入非成员个数" />
      <van-field label="带动农户数量（个）" v-model="entityForm.driveFarmers" label-width="auto" input-align="right" placeholder="请输入带动农户数量（个）" />
      <van-field label="网站网址" v-model="entityForm.webLinks" input-align="right" placeholder="请输入网站网址" />
<!--      <van-field label="关联账套" v-model="entityForm.bookName" input-align="right" placeholder="请输入关联账套" />-->


      <van-field
        readonly
        clickable
        required
        :rules="[{ required: true , message:'请选择服务区域'  }]"
        v-model="entityForm.serviceDeptName"
        label="服务区域"
        placeholder="请选择服务区域"
        @click="showDeptId = true"
        right-icon="arrow-down"
        label-width="auto"
        input-align="right"
      />
      <van-popup v-model="showDeptId" position="bottom" get-container="body">
        <van-cascader
          v-model="villageValue"
          title="请选择服务区域"
          :options="deptOptions"
          @close="showDeptId = false"
          @change="onConfirmDept"
          active-color="#1989fa"
          :field-names="hcAreaInfoFieldName"
        />
      </van-popup>
<!--      <van-field label="服务区域" v-model="entityForm.serviceDeptName" input-align="right" placeholder="请输入服务区域" />-->
      <van-field label="图片" :border="false" input-align="right" readonly />
      <div style="padding: 0 4% 2vh;">
        <van-uploader v-model="entityForm.masterMapList" :after-read="afterReadEvidenceEntityForm" :before-delete="deleteFileEvidenceEntityForm" />
      </div>
    </div>

    <div class="main">
      <MapGisTag ref="clickLoading" :showBtn="true" :message="entityForm.theGeom" v-on:formSubmit="MapTag"></MapGisTag>
    </div>


    <div class="main_btn">
      <p @click="submitForm">保存</p>
    </div>
    <!--  内容结束  -->
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import {commonUpload, entityGet, treeselect,entityEdit} from "@/api/agriculturalTrusteeship";
  import MapGisTag from "@/components/Map/MapGisTagDTG";
  let map ;
  let myGeo ;
  export default {
    name: "agriculturalTrusteeshipSocializationRelease",
    components: {
      MapGisTag
    },
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
        zoom: 15, //地图展示级别
        showDialog:false,
        entityForm:{},
        content:{},
        statisticsTypeIdOptions:[],
        industryClassificationTypeOptions:[],
        modelSocietyTypeOptions:[],
        statisticsTypeIdOptions2:[],
        industryClassificationTypeOptions2:[],
        modelSocietyTypeOptions2:[],
        mainImgUploader2:[],
        mainImgArrEntity:[],

        showStatisticsTypeId : false,
        statisticsTypeId:'',
        industryClassificationType:'',
        showIndustryClassificationType: false,
        modelSocietyType:'',
        showModelSocietyType: false,
        showRegisterTime :false,
        currentDate:new Date(),
        deptOptions:[],
        deptName:'',
        showDeptId:false,
        villageValue : '',
        hcAreaInfoFieldName: {
          text: "label",
          value: "value",
          children: "children",
        },
      };
    },
    created() {
      this.getDicts("newBusinessEntity_statistics_project").then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.statisticsTypeIdOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
        this.statisticsTypeIdOptions2 = response.data;
      });
      this.getDicts("Industrial_classification_type").then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.industryClassificationTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
        this.industryClassificationTypeOptions2 = response.data;
      });
      this.getDicts("model_society_type").then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.modelSocietyTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
        this.modelSocietyTypeOptions2 = response.data;
      });

      treeselect().then(res=>{
        if (res.code == 200) {
          this.deptOptions = res.data;
        }
      })
      this.getUser();
    },
    methods: {
      //获取自己返回值
      /** 查找地图中定位点 */
      MapTag: function (data) {
        this.entityForm.theGeom = data;
      },
      //每个查看修改，新增  方法下引用下面方法
      mapClickLoading(){
        setTimeout(() => {
          this.$refs.clickLoading.pointPaceCountryDarw();
        }, 500);
      },
      getUser(){
        entityGet(Cookies.get('ACCESS-SESSION-ID')).then(res=>{
          this.statisticsTypeId = this.selectDictLabel(this.statisticsTypeIdOptions2, res.data.statisticsTypeId);
          this.industryClassificationType = this.selectDictLabel(this.industryClassificationTypeOptions2, res.data.industryClassificationType);
          this.modelSocietyType = this.selectDictLabel(this.modelSocietyTypeOptions2, res.data.modelSocietyType);
          if (res.data.masterMap){
            res.data.masterMapList = [];
            var attachement = res.data.masterMap.split( "," );
            this.mainImgArrEntity = res.data.masterMap.split( "," );
            attachement.forEach(responseAttach=>{
              res.data.masterMapList.push({
                url:'/api' + responseAttach,
                isImage: true
              });
            })
          }
          this.entityForm = res.data;
          this.mapClickLoading();
        })
      },
      afterReadEvidenceEntityForm(file){
        let params1 = new FormData();
        params1.append("file", file.file);
        commonUpload(params1).then((r1) => {
          // this.tEnforceSamplingGoodsList[index].attachement.push(r1.fileName);
          this.mainImgArrEntity.push(r1.fileName)
        })
      },
      deleteFileEvidenceEntityForm(file,detail) {
        this.mainImgArrEntity.splice(detail.index,1);
        this.entityForm.masterMapList.splice(detail.index,1);
      },
      onConfirmStatisticsTypeId(data){
        this.entityForm.statisticsTypeId = data.value;
        this.statisticsTypeId = data.text;
        this.showStatisticsTypeId = false;
      },
      onConfirmIndustryClassificationType(data){
        this.entityForm.industryClassificationType = data.value;
        this.industryClassificationType = data.text;
        this.showIndustryClassificationType = false;
      },
      onConfirmModelSocietyType(data){
        this.entityForm.modelSocietyType = data.value;
        this.modelSocietyType = data.text;
        this.showModelSocietyType = false;
      },
      onConfirmRegisterTime(data){
        this.currentDate = data ;
        this.entityForm.registerTime = this.format(data,'yyyy-MM-dd')
        this.showRegisterTime = false;
      },
      //选择案件属地
      onConfirmDept({ selectedOptions }){
        console.log(selectedOptions.map((option) => option.label))
        this.entityForm.serviceDeptName = selectedOptions[selectedOptions.length-1].label;
        this.entityForm.serviceDeptId = selectedOptions[selectedOptions.length-1].value;
        this.deptName = selectedOptions[selectedOptions.length-1].label;
        // this.showDeptId = false
      },
      submitForm(){
        this.entityForm.masterMap = this.mainImgArrEntity.join(',')
        entityEdit(this.entityForm).then(res=>{
          this.$notify({ type: 'success', message: '保存成功' });
          setTimeout(function(){
            history.back(-1);
          },2000)
        })
      }
    },
  }
</script>
<style scoped lang="scss">
#container{
  width: 100%;
  height: 25vh;
  overflow: hidden;
}
.home_wrapper{
  background: #F6F6F6;
  min-height: 100vh;
}
.main{
  width: 92%;
  margin: 0 auto;
  margin-top: 2vh;
  border-radius: 10PX;
  overflow: hidden;
  background-color: #FFF;
}
  .main_btn{
    display: flex;
    justify-content: space-around;
    padding: 4vh 0;
    p{
      font-size: .4rem;
      width: 35%;
      text-align: center;
      padding: 10PX 0;
      border-radius: 5rem;
      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
      &:nth-child(1){
        background: #334281;
        color: #ffffff;
      }
      &:nth-child(2){
        background: #D1D5E4;
        color: #334281;
      }
    }
  }
</style>
