<template>
  <div>
    <Modal v-model="showDialog" title="走访日志信息列表" width="1200">
      <Button type="primary" @click="createPeopleLog" style="margin-bottom: 10px">新增走访日志</Button>
      <Table border :columns="peopleLog.dataColumns" :data="peopleLog.dataList">
        <template slot-scope="{ row, index }" slot="is_pitfall">
          <span v-if="row.is_pitfall === '1'">是</span>
          <span v-if="row.is_pitfall === '2'">否</span>
        </template>
        <template slot-scope="{ row, index }" slot="is_follow">
          <span v-if="row.is_follow === '1'">是</span>
          <span v-if="row.is_follow === '2'">否</span>
        </template>
        <template slot-scope="{ row, index }" slot="abnormal">
          <span v-if="row.abnormal === '1'">是</span>
          <span v-if="row.abnormal === '2'">否</span>
        </template>
        <template slot-scope="{ row, index }" slot="risk_level">
          <span v-if="row.risk_level === '1'">无风险</span>
          <span v-if="row.risk_level === '2'">低风险</span>
          <span v-if="row.risk_level === '3'">高风险</span>
        </template>
        <template slot-scope="{ row, index }" slot="visit_date">
          {{ getDate(row.visit_date) }}
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="success" size="small" style="margin-right: 5px" @click="updatePeopleLog(row)">编辑</Button>
          <Button type="primary" size="small" style="margin-right: 5px" @click="detailPeopleLog(row)">详情</Button>
          <Button type="error" size="small" style="margin-right: 5px" @click="removePeopleLog(row)">删除</Button>
        </template>
      </Table>
      <!-- <div slot="footer">
        <Button type="text" @click="showDialog=false">取消</Button>
        <Button type="primary" @click="familyConfirm">确定</Button>
      </div> -->
    </Modal>
    <Modal v-model="peopleLog.detailShow" title="走访日志信息详情" width="1200">
      <Form ref="formEmployee" :label-width="120" style="margin: 10px;">
        <div class="title-style">身份信息</div>
        <Row style="margin-top: 30px">
          <Col span="8" style="margin-left: -4%">
          <FormItem label="姓名">
            <Input disabled v-model="peopleLog.info.user_name"></Input>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="身份证号">
            <Input disabled v-model="peopleLog.info.cardno"></Input>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="联系方式">
            <Input disabled v-model="peopleLog.info.tel"></Input>
          </FormItem>
          </Col>
        </Row>
        <!-- <div class="title-style">居住信息</div>
        <Row style="margin-top: 30px">
          <Col span="8" style="margin-left: -4%">
          <FormItem label="市">
            <Input disabled v-model="peopleLog.info.cityName"></Input>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="区">
            <Input disabled v-model="peopleLog.info.areaName"></Input>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="街道">
            <Input disabled v-model="peopleLog.info.streetName"></Input>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8" style="margin-left: -4%">
          <FormItem label="社区">
            <Input disabled v-model="peopleLog.info.communityName"></Input>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="网格">
            <Input disabled v-model="peopleLog.info.gardenName"></Input>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="楼">
            <Input disabled v-model="peopleLog.info.buildName"></Input>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8" style="margin-left: -4%">
          <FormItem label="单元">
            <Input disabled v-model="peopleLog.info.unitName"></Input>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="层">
            <Input disabled v-model="peopleLog.info.floorName"></Input>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="户">
            <Input disabled v-model="peopleLog.info.doorplateName"></Input>
          </FormItem>
          </Col>
        </Row> -->
        <div class="title-style">走访信息</div>
        <Row>
          <Col span="8" style="margin-left: -4%">
          <FormItem label="日期">
            <DatePicker disabled type="date" v-model="peopleLog.info.visit_date1" style="width: 100%"></DatePicker>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="走访人">
            <Input disabled v-model="peopleLog.info.community_user_name"></Input>
          </FormItem>
          </Col>
        </Row>
        <!-- <Row>
          <Col span="24" style="margin-left: -4%">
          <FormItem label="标签">
            <Tag v-for="(item, index) in peopleLog.info.label_name_list" :key="index" color="error">{{ item }}</Tag>
          </FormItem>
          </Col>
        </Row> -->
        <Row>
          <Col span="8" style="margin-left: -4%">
          <FormItem label="重点关注">
            <Select v-model="peopleLog.info.is_follow" placeholder="请选择是否重点人员">
              <Option value="1">是</Option>
              <Option value="2">否</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="是否存在隐患">
            <Select v-model="peopleLog.info.is_pitfall" placeholder="是否存在隐患">
              <Option value="1">是</Option>
              <Option value="2">否</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="是否异常人员">
            <Select v-model="peopleLog.info.abnormal" placeholder="是否异常人员">
              <Option value="1">是</Option>
              <Option value="2">否</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="8" style="margin-left: -4%">
          <FormItem label="矛盾风险等级">
            <Select v-model="peopleLog.info.risk_level" placeholder="矛盾风险等级">
              <Option value="1">无风险</Option>
              <Option value="2">低风险</Option>
              <Option value="3">高风险</Option>
            </Select>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="24" style="margin-left: -4%">
          <FormItem label="走访内容">
            <Input :rows="6" type="textarea" v-model="peopleLog.info.visit_content"></Input>
          </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="peopleLog.detailShow = false">取消</Button>
        <Button :disabled="peopleLog.confirmButton" type="primary" size="large" @click="peopleLogConfirm">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { findPeopleZFLogList2, getPeopleInfoByCardno, createPeopleZFLog, updatePeopleZFLog, deletePeopleZFLog } from '@/api/peopleInfo.js'
import { getDate } from '@/libs/tools'
import { date0str1 } from '@/api/eventlist'
export default {
  name: 'zfLog',
  props: {
    // peopleInfo: Object
  },
  data () {
    return {
      rowObj: '',
      showDialog: false,
      peopleLog: {
        info: {
          community_user_name: '',
          grid_user_cardno: '',
          tel: '',
          is_follow: '',
          is_pitfall: '',
          abnormal: '',
          risk_level: '',
          visit_date: '',
          visit_content: ''
        },
        dataColumns: [
          { type: 'index', title: '序号', align: 'center', width: '80' },
          { title: '姓名', key: 'community_user_name', align: 'center', width: '180' },
          { title: '身份证号 ', key: 'grid_user_cardno', align: 'center' },
          { title: '联系方式', key: 'tel', align: 'center' },
          { title: '是否重点关注', slot: 'is_follow', align: 'center' },
          { title: '是否存在隐患', slot: 'is_pitfall', align: 'center' },
          { title: '是否异常人员', slot: 'abnormal', align: 'center' },
          { title: '矛盾风险等级', slot: 'risk_level', align: 'center' },
          { title: '走访日期', slot: 'visit_date', align: 'center' },
          {
            title: '操作',
            slot: 'action',
            fixed: 'right',
            align: 'center',
            width: '180'
          }
        ],
        dataList: [],
        detailShow: false,
        operate_type: 'create',
        confirmButton: false
      }
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
  },
  methods: {
    detailPeopleLog (e) {
      let data = JSON.parse(JSON.stringify(e))
      data.grid_user_cardno = this.cardnoWJM
      data.cardno = this.rowObj.cardNo
      data.tel = this.rowObj.phone
      data.user_name = this.rowObj.name
      this.peopleLog.info = data
      this.peopleLog.info.visit_date1 = new Date(e.visit_date)
      this.peopleLog.detailShow = true
      this.peopleLog.confirmButton = true
    },
    removePeopleLog (e) {
      this.$Modal.confirm({
        title: '是否确认删除？',
        loading: true,
        onOk: () => {
          deletePeopleZFLog({ id: e.id }).then((ret) => {
            if (ret.data.errcode === 0) {
              this.$Notice.success({ title: '删除成功！' })
              this.init()
            } else {
              this.$Notice.error({ title: '删除失败！' })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    updatePeopleLog (e) {
      let data = JSON.parse(JSON.stringify(e))
      data.grid_user_cardno = this.cardnoWJM
      data.cardno = this.rowObj.cardNo
      data.tel = this.rowObj.phone
      data.user_name = this.rowObj.name
      this.peopleLog.operate_type = 'update'
      this.peopleLog.info = data
      this.peopleLog.info.visit_date1 = new Date(e.visit_date)
      this.peopleLog.detailShow = true
      this.peopleLog.confirmButton = false
    },
    peopleLogConfirm () {
      let data = {
        cardno: this.peopleLog.info.cardno,
        city_id: this.peopleLog.info.city_id,
        street_id: this.peopleLog.info.street_id,
        community_id: this.peopleLog.info.community_id,
        is_pitfall: this.peopleLog.info.is_pitfall,
        abnormal: this.peopleLog.info.abnormal,
        risk_level: this.peopleLog.info.risk_level,
        is_follow: this.peopleLog.info.is_follow,
        visit_content: this.peopleLog.info.visit_content,
        attachment: this.peopleLog.info.attachment,
        visit_date: date0str1(this.peopleLog.info.visit_date1)
      }
      if (this.peopleLog.operate_type === 'create') {
        createPeopleZFLog(data).then((ret) => {
          if (ret.data.errcode === 0) {
            this.init()
            this.peopleLog.detailShow = false
            this.$Notice.success({
              title: '保存成功！',
              desc: ret.data.errmsg
            })
          } else {
            this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
          }
        })
      }
      if (this.peopleLog.operate_type === 'update') {
        data.id = this.peopleLog.info.id
        updatePeopleZFLog(data).then((ret) => {
          if (ret.data.errcode === 0) {
            this.init(data)
            this.peopleLog.detailShow = false
            this.$Notice.success({
              title: '保存成功！',
              desc: ret.data.errmsg
            })
          } else {
            this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
          }
        })
      }
    },
    createPeopleLog () {
      let data = {
        cardno: this.rowObj.cardNo
      }
      getPeopleInfoByCardno(data).then((ret) => {
        if (ret.data.errcode === 0) {
          this.peopleLog.info = Object.assign(this.peopleLog.info, ret.data.data)
          this.peopleLog.info.cardno = this.rowObj.cardNo
          this.peopleLog.info.visit_date1 = new Date()
          this.peopleLog.info.user_id = this.severUserInfo.id
          this.peopleLog.info.community_user_name = this.severUserInfo.name
          this.peopleLog.operate_type = 'create'
          this.peopleLog.detailShow = true
          this.peopleLog.confirmButton = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    getDate (timeStamp) {
      return getDate(timeStamp / 1000, 'year')
    },
    show (row) {
      this.showDialog = true
      this.rowObj = row
      // 获取数据
      this.init()
    },
    init () {
      findPeopleZFLogList2({ card_no: this.rowObj.cardNo }).then((ret) => {
        if (ret.data.errcode === 0) {
          this.peopleLog.dataList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.renyuan-item-box {
  margin-bottom: 16px;
}

/deep/ .ivu-card-bordered {
  border: 2px solid #EEEEEE;
}
</style>
