<template>
  <div class="app-container">
        <div>
        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
        </div>
        <el-table v-loading="listLoading"
                  :data="addressList"
                  style="width: 100%;margin-top:10px;"
                  border
                  fit
                  stripe="true"
                  highlight-current-row
                  max-height="600">
          <el-table-column type="index" width="50" />
          <el-table-column align="center" label="中文地址">
            <template slot-scope="scope">
              {{ scope.row.address }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="英文地址">
            <template slot-scope="scope">
              {{ scope.row.eaddress }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="邮编">
            <template slot-scope="scope">
              {{ scope.row.code }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="地址类型">
            <template slot-scope="scope">
              {{ scope.row.type }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="260px">
            <template slot-scope="scope">
              <el-button type="primary"
                         size="small"
                         @click="handleUpdate(scope)">编辑</el-button>

              <el-button type="danger"
                         size="small"
                         @click="handleDelete(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
            <el-dialog :visible.sync="dialogVisible" :title="dialogType==='update'?'编辑':'新增'">
              <el-form ref="Form"
                       :model="addressData"
                       label-width="80px"
                       label-position="right"
                       :rules="rule1">
                <el-form-item label="中文地址:" prop="address">
                  <el-input v-model="addressData.address" placeholder="中文地址" />
                </el-form-item>
                <el-form-item label="英文地址:" prop="eadress">
                  <el-input v-model="addressData.eaddress" placeholder="英文地址" />
                </el-form-item>
                <el-form-item label="地址邮编:" prop="code">
                  <el-input v-model="addressData.code" placeholder="邮编" />
                </el-form-item>
                <el-form-item label="地址类型:" prop="type">
                  <el-select v-model="addressData.type" placeholder="请选择地址类型" clearable :style="{width: '100%'}">
                    <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                               :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属国家" prop="country_code">
                  <el-select filterable v-model="addressData.country_code" @change='getValue'
                             placeholder="请选择国家"
                             clearable
                             :style="{width: '35%'}">
                    <el-option v-for="(item, index) in country_Options"
                               :key="index"
                               :label="item.name"
                               :value="item.id"
                               :disabled="item.disabled">

                    </el-option>
                  </el-select>
                </el-form-item>
                  <el-form-item label="地域选择" prop="countyarry">
                    <el-cascader v-model="addressData.countyarry" :options="countyOptions" :props="county_prosecode"
                                 :style="{width: '60%'}" clearable placeholder="请选择地区"></el-cascader>
                  </el-form-item>

</el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirms('Form')">确认</el-button>
      </div>
    </el-dialog>
   
  </div>
</template>
<script>
import { getAddressList, createAddress, updateAddress, deleteAddress} from "@/api/enterprise"
import Pagination from "@/components/Pagination"
import checkPermission from '@/utils/permission'
import { genTree } from "@/utils";
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getDictList } from "@/api/dict";
export default {
  name:'AddressData',
  components: {Treeselect, Pagination},
  props:['enterprise'],
  data() {
    return {
     addressData: {
         id: null,
         address: null,
         eaddress: null,
         code: null,
         type: null,
         county_code: null,
        enterprise: this.enterprise,
         country_code:null,
      },
      addressList: [],
      listLoading: true,
     dialogVisible:false,
      dialogType:'create',
      rule1: {
       
      },
      country_Options: [],
      countyOptions:[],
      field101Options: [],
         county_prosecode: {
          "multiple": false,
          "label": "name",
          "value": "value",
          "children": "children"
        },
       typeOptions: [
        {
          label: "生产地址",
          value: "生产地址"
        },
        {
          label: "通信地址",
          value: "通信地址"
        },
        {
          label: "注册地址",
          value: "注册地址"
        }
      ],
     
    };
  },
  
  created() {
    this.getList(),
      this.getcountrytype()
  },
  methods: {
    checkPermission,
    getList() {
     
      this.listLoading = true;
      getAddressList({ enterprise: this.enterprise }).then(response => {
        if (response.data) {
          this.addressList = response.data;
         
          
        }
        this.listLoading = false
      });
    },
      getcountrytype() {
        getDictList({ type__code: "world_regions" }).then(response => {
          this.country_Options = genTree(response.data);
        });
       getDictList({ type__code: "china_regions" }).then(response => {
            this.countyOptions = genTree(response.data);
          });
    },
   

    getValue() {

      if (this.addressData.country_code == 69) {
        getDictList({ type__code: "china_regions" }).then(response => {
          this.countyOptions = genTree(response.data);
        });
      }
      else {
        this.countyOptions = "";
      }
       
      
         
       
      },
    handleCreate() {
      this.addressData= {
         id: null,
         address: null,
         eaddress: null,
         code: null,
         type: null,
         county_code: null,
        enterprise: this.enterprise,
        country_code: null
        

      },
      this.dialogType = 'create'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['Form'].clearValidate()
      })
    },
    handleUpdate(scope) {
      this.addressData = Object.assign({}, scope.row) // copy obj
      this.dialogType = 'update'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['Form'].clearValidate()
      })
    },
handleDelete(scope){
   
  this.$confirm('确定删除本条数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
  }).then(() => {


     deleteAddress(scope.row.id).then(res=>{
        this.$notify({
                title: '删除成功',
                type: 'success',
                duration: 2000
              })
              this.getList()
    })
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    
},
   
   async confirms(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const isEdit = this.dialogType === 'update'
          if (isEdit) {
             this.addressData.county_code=this.addressData.countyarry[2]
            updateAddress(this.addressData.id, this.addressData).then(() => {
              this.getList()
              this.dialogVisible = false
              this.$notify({
                title: '成功',
                type: 'success',
                duration: 2000
              })
            })
          } else {

            this.addressData.county_code=this.addressData.countyarry[2]
   
            createAddress(this.addressData).then(res => {
              this.getList()
              this.dialogVisible = false
              this.$notify({
                title: '成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        } else {
          return false
        }
      })
    }
  }
};
</script>
