<template>
  <div class="base_msg_box">
    <n-tabs type="segment" animated>
      <n-tab-pane name="chap1" tab="基本信息">
        <n-table :single-line="false" class="base_msg_table">
          <tbody v-if="ydyc.STCD">
            <tr>
              <td>地区</td>
              <td>{{ ydyc.ADDVCD ? ydyc.ADDVCD : '--' }}</td>
            </tr>
            <tr>
              <td>降雨等级</td>
              <td>{{ ydyc.JYDJ ? ydyc.JYDJ : '--' }}</td>
            </tr>
            <tr>
              <td>风险等级</td>
              <td>{{ ydyc.FXDJ ? ydyc.FXDJ : '--' }}</td>
            </tr>
            <tr>
              <td>区位特征</td>
              <td>{{ ydyc.QWTZ ? ydyc.QWTZ : '--' }}</td>
            </tr>
          </tbody>
        </n-table>
      </n-tab-pane>
      <n-tab-pane name="chap2" tab="责任人">
        <n-table :single-line="false">
          <tbody>
            <tr>
              <td>ID</td>
              <td>责任人</td>
              <td>姓名</td>
              <td>手机号</td>
            </tr>

            <tr v-for="(item, i) in tableData" :key="item.iphone">
              <td>{{ i + 1 }}</td>
              <td>{{ item.fzr }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.iphone }}</td>
            </tr>
          </tbody>
        </n-table>
      </n-tab-pane>
      <n-tab-pane name="chap3" tab="应急措施">
        <div class="deals" v-html="Formatyj(ydyc.YJCS ? ydyc.YJCS : '--')" />
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script>
import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
import { lyInfoStationDetail, lyInfoSwlljcData } from '@/services';
import * as echarts from 'echarts';

import ydycData from './一点一策.json';

export default {
  name: 'shuiweiModals',
  props: {
    valueModalNld: { Object, default: () => {} },
  },
  components: {},
  data: () => {
    return {
      ydyc: {},

      tableData: [],
    };
  },
  created() {
    this.ydyc = ydycData.find((item) => item.STCD == this.valueModalNld.STCD);
    console.log(this.ydyc);

    this.tableDataInit();
  },
  methods: {
    tableDataInit() {
      let tab = [];
      console.log(this.ydyc);

      if (this.ydyc.SWXCFZR && this.ydyc.IPHONEONE) {
        tab.push({
          fzr: '水务现场负责人',
          name: this.ydyc.SWXCFZR,
          iphone: this.ydyc.IPHONEONE,
        });
      }
      if (this.ydyc.JGXCFZR && this.ydyc.IPHONETWO) {
        tab.push({
          fzr: '交管现场负责人',
          name: this.ydyc.JGXCFZR,
          iphone: this.ydyc.IPHONETWO,
        });
      }
      if (this.ydyc.CGXCFZR && this.ydyc.IPHONETHREE) {
        tab.push({
          fzr: '城管现场负责人',
          name: this.ydyc.CGXCFZR,
          iphone: this.ydyc.IPHONETHREE,
        });
      }
      if (this.ydyc.JDFZR && this.ydyc.IPHONEFOUR) {
        tab.push({ fzr: '街道负责人', name: this.ydyc.JDFZR, iphone: this.ydyc.IPHONEFOUR });
      }
      if (this.ydyc.SWXCTJDY && this.ydyc.IPHONEFIVE) {
        tab.push({
          fzr: '水务现场突击队员',
          name: this.ydyc.SWXCTJDY,
          iphone: this.ydyc.IPHONEFIVE,
        });
      }

      let name = [];
      let iphone = [];
      let fzr = null;
      tab.forEach((i) => {
        name = i.name.split('、');
        iphone = i.iphone.split('、');
        if (name.length > 1 && iphone.length > 1) {
          fzr = i.fzr;
          tab = tab.filter((tab) => tab.fzr !== fzr);
          name.forEach((item, idx) => {
            tab.push({
              fzr: fzr,
              name: item,
              iphone: iphone[idx],
            });
          });
        }
      });
      tab.push({
        fzr: '责任人',
        name: '融通',
        rt: true,
        uid: 'CHENKANG',
        iphone: '18827616087',
        // iphone: '18702710303'
      });
      let newtab = tab;
      if (this.ydyc.STCD === '42010004200') {
        const arr = [
          { fzr: '中心责任人', name: '杨磊', uid: 'YANGLEI', rt: true, iphone: '13886145228' },
          { fzr: '中心责任人', name: '金卫华', uid: 'JINWEIHUA', rt: true, iphone: '13659827212' },
          { fzr: '中心责任人', name: '杨剑锋', uid: 'YANGJIANFENG', rt: true, iphone: '18071440035' },
          { fzr: '中心责任人', name: '刘敏', uid: 'LIUMIN', rt: true, iphone: '15629093505' },
          { fzr: '中心责任人', name: '聂彪', uid: 'NIEBIAO', rt: true, iphone: '18995549116' },
        ];
        newtab = tab.concat(arr);
      }
      this.tableData = newtab;
    },

    // 应急措施格式
    Formatyj(val) {
      val = val.replace(/[1-9]/g, `$&`).split('\n');
      let str = '';
      for (var i = 0; i < val.length; i++) {
        str += `${val[i]}<br/>`;
      }
      return str;
    },
  },
};
</script>

<style lang="less">
.base_msg_box {
  width: 100%;
  height: 500px;

  .n-table {
    text-align: center;
    background-color: transparent;
    border-color: #fff;
    td {
      background-color: transparent;
      border-color: #fff;
    }
  }
}
</style>