<template>
  <el-dialog :title="modalTitle" :visible.sync="modalVisible" :width="formLabelWidth" top="2vh" @close="handleCancel">
    <div class="mobile">
      <div class="hc-box add">
        <div class="hc-box-header">贫困户信息</div>
        <div class="hc-box-wrap">
          <el-form label-width="100px" :model="form" :rules="rules" ref="from" class="from">
            <el-form-item label="编号:"><el-input type="text" v-model="form.farmerCode" :disabled="true" placeholder="类别值后台自动生成"></el-input></el-form-item>
            <el-form-item label="姓名:" prop="collectiveName">
              <el-input type="text" v-model="form.collectiveName" placeholder="贫困户姓名" :disabled="limit.isRead"></el-input>
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="联系电话">
                  <el-input type="text" v-model="form.phone" :disabled="limit.isRead"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行卡号">
                  <el-input type="text" v-model="form.bankCardNo" :disabled="limit.isRead"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="银行名称">
                  <el-input type="text" v-model="form.bankName" :disabled="limit.isRead"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行机构代码">
                  <el-input type="text" v-model="form.bankCode" :disabled="limit.isRead"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="单位">
                  <el-input type="text" v-model="form.orgUnit" :disabled="limit.isRead"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注:">
              <el-input type="textarea" :rows="3" v-model="form.remark" :disabled="limit.isRead"></el-input>
            </el-form-item>
            <el-divider content-position="left">帮扶区域</el-divider>
            <el-form-item label="已选区域" prop="fkPovertyAreaName">
              <el-input type="text" v-model="form.fkPovertyAreaName" :disabled="true" placeholder="请使用表格选择"></el-input>
            </el-form-item>
            <div class="methodologyMain" v-if="modalAction !== 'view'">
              <div class="methodologyMain-header">
                <el-form :inline="true" :model="searchParams" @submit.native.prevent>
                  <el-input type="text" v-model="searchParams.povertyAreaName" size="mini" clearable placeholder="请输入帮扶区域" style="width:200px;margin-right:10px;"></el-input>
                  <el-button type="primary" size="mini" @click="onSearch">搜索</el-button>
                </el-form>
              </div>
              <div class="methodologyMain-wrap">
                <el-table :data="areaList" v-loading="areaLoading" border>
                  <el-table-column label="序号" type="index" width="50" align="center" />
                  <el-table-column label="区域名称" align="center" prop="povertyAreaName" />
                  <el-table-column label="区域地址" align="center" prop="areaAddress" />
                  <el-table-column label="区域描述" align="center" prop="areaDesc" />
                  <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button size="mini" type="success" @click="selectArea(scope.row)">选择</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="searchParams.pageNo" :limit.sync="searchParams.pageSize" @pagination="onSearch" />
              </div>
            </div>
            <el-divider content-position="left">关联贫困组员</el-divider>
            <!-- v-if="modalAction !== 'view'" -->
            <div class="methodologyMain">
              <div class="methodologyMain-header" v-if="modalAction !== 'view'">
                <el-form :inline="true" :model="searchParams2" @submit.native.prevent>
                  <el-input type="text" v-model="searchParams2.condition" size="mini" clearable placeholder="请输入帮扶区域" style="width:200px;margin-right:10px;"></el-input>
                  <el-button type="primary" size="mini" @click="onPeople">搜索</el-button>
                </el-form>
              </div>
              <div class="methodologyMain-wrap">
                <el-table :data="peopleList" v-loading="peopleLoading" border v-if="modalAction !== 'view'">
                  <el-table-column label="序号" type="index" width="50" align="center" />
                  <el-table-column label="归属人编号" align="center" prop="farmerCode" />
                  <el-table-column label="归属人姓名" align="center" prop="farmerName" />
                  <el-table-column label="家庭人数" align="center" prop="familyNum" />
                  <el-table-column label="家庭年收入" align="center" prop="incomeVal" />
                  <el-table-column label="归属人类型" align="center" prop="farmerType" />
                  <el-table-column label="联系电话" align="center" prop="phone" />
                  <el-table-column label="银行卡号" align="center" prop="bankCardNo" />
                  <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button size="mini" type="success" @click="selectPerson(scope.row)">选择</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="peopleTotal > 0"
                  :total="peopleTotal"
                  v-if="modalAction !== 'view'"
                  :page.sync="searchParams2.pageNo"
                  :limit.sync="searchParams2.pageSize"
                  @pagination="onPeople" />
                <h2 v-if="modalAction !== 'view'">已选：</h2>
                <el-table :data="form.farmerInfos" border>
                  <el-table-column label="序号" type="index" width="50" align="center" />
                  <el-table-column label="归属人编号" align="center" prop="farmerCode" />
                  <el-table-column label="归属人姓名" align="center" prop="farmerName" />
                  <el-table-column label="家庭人数" align="center" prop="familyNum" />
                  <el-table-column label="家庭年收入" align="center" prop="incomeVal" />
                  <el-table-column label="归属人类型" align="center" prop="farmerType" />
                  <el-table-column label="联系电话" align="center" prop="phone" />
                  <el-table-column label="银行卡号" align="center" prop="bankCardNo" />
                  <el-table-column label="操作" align="center" width="180" v-if="modalAction !== 'view'" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button size="mini" type="danger" @click="delSelPerson(index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-divider content-position="left">图片附件</el-divider>
                <div class="uploadImg">
                  <el-upload
                    v-if="!limit.isRead"
                    accept=".jpg, .png"
                    :headers="upload.headers"
                    :action="upload.url"
                    :disabled="upload.isUploading"
                    :on-progress="handleFileUploadProgress"
                    :on-success="handleFileSuccess"
                    :file-list="fileList"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                  <ul class="uploadImgList">
                    <li v-for="(item, index) in form.collectiveImages" :key="index">
                      <img :src="imgRequest + item + '?imageView2/1/w/200/h/200'" />
                      <span class="del" @click="handelImgRemove(index)" v-if="!limit.isRead"><i class="el-icon-delete-solid"></i></span>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth';
import { peopleType, nation, sexList } from '@/api/CONST.js';
import { listArea, listPeople, saverCollectiveFarmer, updateCollectiveFarmer } from '@/api/belongToSubject/org';
export default {
  name: 'addMobiel',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'title'
    },
    action: {
      type: String,
      default: 'add'
    },
    selectRow: {
      type: Object,
      default: null
    }
  },
  watch: {
    visible(newVal, oldVal) {
      this.modalVisible = newVal;
    },
    title(newVal, oldVal) {
      this.modalTitle = newVal;
    },
    action(newVal, oldVal) {
      this.modalAction = newVal;
    },
    selectRow(newVal, oldVal) {
      this.modalSelectRow = newVal;
    }
  },
  data() {
    return {
      modalTitle: this.title,
      modalVisible: this.visible,
      modalAction: this.action,
      modalSelectRow: this.selectRow,
      formLabelWidth: '1024px',
      peopleTypeList: peopleType,
      nationList: nation,
      sexLists: sexList,
      //窗口权限
      limit: {
        isRead: false, //是否只读
        isAdd: false //是否可写
      },
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/system/upload/fileImg'
      },
      //验证
      rules: {
        collectiveName: [{ required: true, message: '姓名不能为空!', trigger: 'blur' }],
        fkPovertyAreaName: [{ required: true, message: '帮扶区域不能为空!', trigger: 'blur' }]
      },
      //图片列表
      fileList: [],
      restaurants: [],
      searchParams: {
        povertyAreaName: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      areaList: [],
      areaLoading: true,
      //贫困户
      searchParams2: {
        pageNo: 1,
        pageSize: 10
      },
      peopleList:[],
      peopleLoading:true,
      peopleTotal:0,
      //表单
      form: {
        collectiveImages: [],
        fkPovertyAreaId: '',
        fkPovertyAreaName: '',
        farmerInfos:[]
      }
    };
  },
  created() {
    this.onSearch();
    this.onPeople();
    let datas;
    switch (this.modalAction) {
      case 'add':
        this.limit.isAdd = true;
        break;
      case 'edit':
        this.limit.isAdd = true;
        console.log(this.modalSelectRow);
        datas = Object.assign({}, this.modalSelectRow);
        console.log(datas)
        datas.collectiveImages = datas.collectiveImages.split(';');
        datas.fkPovertyAreaName = datas.povertyArea.povertyAreaName;
        this.form = datas;
        break;
      case 'view':
        this.limit.isRead = true;
        datas = Object.assign({}, this.modalSelectRow);
        console.log(datas)
        datas.collectiveImages = datas.collectiveImages.split(';');
        datas.fkPovertyAreaName = datas.povertyArea.povertyAreaName;
        this.form = datas;
        break;
      default:
        break;
    }
  },
  methods: {
    //区域搜索
    onSearch() {
      this.areaLoading = true;
      listArea(this.searchParams).then(res => {
        this.areaLoading = false;
        this.areaList = res.retBody;
        this.total = res.retHead.total;
      });
    },
    //贫困人员
    onPeople(){
      this.peopleLoading = true;
      listPeople(this.searchParams).then(res => {
        this.peopleLoading = false;
        this.peopleList = res.retBody;
        this.peopleTotal = res.retHead.total;
      });
    },
    //贫困人员确定
    selectPerson(item){
      this.form.farmerInfos.push(item)
    },
    //删除已选择的人
    delSelPerson(index){
      this.form.farmerInfos.splice(index,1)
    },
    //区域确定
    selectArea(item) {
      this.form.fkPovertyAreaId = item.guid;
      this.form.fkPovertyAreaName = item.povertyAreaName;
    },
    //表单提交
    submit() {
      this.$refs.from.validate(valid => {
        if (valid) {
          let params = Object.assign({}, this.form);
          params.collectiveImages = params.collectiveImages.join(';');
          console.log(params);
          if (this.modalAction === 'add') {
            saverCollectiveFarmer(params).then(res => {
              console.log(res);
              if (res.retHead.errCode === 0) {
                this.msgSuccess('操作成功');
                this.modalVisible = false;
                this.$emit('closeModal', true);
              } else {
                this.msgError('保存失败，请检查!');
              }
            });
          } else {
            updateCollectiveFarmer(params).then(res => {
              console.log(res);
              if (res.retHead.errCode === 0) {
                this.msgSuccess('操作成功');
                this.modalVisible = false;
                this.$emit('closeModal', true);
              } else {
                this.msgError('保存失败，请检查!');
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.fileList = [];
      this.form.collectiveImages.push(response.retBody);
      this.upload.isUploading = false;
    },
    // 图片删除
    handelImgRemove(i) {
      this.form.collectiveImages.splice(i, 1);
    },
    //窗口关闭
    handleCancel() {
      this.$emit('closeModal', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.hc-box {
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
  .hc-box-header {
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-weight: bold;
    color: #333;
    padding: 0 15px;
    margin-bottom: 20px;
    .action {
      margin-left: 10px;
      color: #304ffe;
    }
  }
  .hc-box-wrap {
    .methodologyMain {
      padding: 0 16px;
      &-header {
        margin-bottom: 10px;
      }
    }
    .uploadImg {
      padding: 0 30px 30px 30px;
      .uploadImgList {
        list-style: none;
        margin: 0;
        padding: 15px 0;
        display: flex;
        flex-flow: row;
        li {
          position: relative;
          border: 1px solid #ddd;
          border-radius: 6px;
          width: 120px;
          height: 120px;
          margin-right: 13px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }
          .del {
            display: none;
            position: absolute;
            top: -9px;
            right: -9px;
            cursor: pointer;
            i {
              font-size: 20px;
              color: red;
            }
          }
          &:hover {
            .del {
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>
