<template>
  <div class="infoList">
    <div class="item-box info-box">
      <div class="item-title">系统信息列表</div>
      <div class="item-body">
        <template>
          <el-table
            :data="infoDataList"
            style="width: 100%"
            stripe
            v-loading="loading"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="CompanyName"
              label="主体企业"
              show-overflow-tooltip
            />
            <el-table-column
              prop="SystemName"
              label="系统名称"
              show-overflow-tooltip
            />
            <el-table-column
              prop="ContactUser"
              label="联系人"
              show-overflow-tooltip
            />
            <el-table-column
              prop="ContactPhone"
              label="联系电话"
              show-overflow-tooltip
            />
            <el-table-column label="操作">
              <template scope="scope">
                <infoForm
                  style="display: inline-block; margin-right: 5px"
                  type="edit"
                  :systemId="scope.row.Id"
                >
                  <el-button type="primary" size="small">修改</el-button>
                </infoForm>
                <InfoEditRecord
                  style="display: inline-block"
                  :systemId="scope.row.Id"
                >
                  <el-button type="success" size="small">查看记录</el-button>
                </InfoEditRecord>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfoList } from "@/api/info";
export default {
  name: "InfoList",
  data() {
    return {
      loading: true,
      listquery: {
        keyword: this.$route.query.keyword,
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
      infoDataList: [],
    };
  },
  created() {
    this.initList();
  },
  mounted() {
    console.log(this.$route.path, "path");
  },
  watch: {
    $route: {
      handler: function (route) {
        this.listquery.keyword = route.query.keyword;
        this.initList();
      },
      immediate: true,
    },
  },
  methods: {
    initList() {
      getInfoList(this.listquery).then(({ data }) => {
        let list = [];
        data.list.forEach((v) => {
          let obj = {
            CompanyName: v.compayInfo.CompanyName,
            SystemName: v.SysytemInfo.SystemName,
            ContactUser: v.compayInfo.ContactUser,
            ContactPhone: v.compayInfo.ContactPhone,
            Id: v.SysytemInfo.Id,
          };
          list.push(obj);
        });
        this.infoDataList = list;
        this.total = data.totalCount;
        this.loading = false;
      });
    },
    getSystemUpdataList() {
      getInfoList({
        id: "580628220576007429",
        pageIndex: 1,
        pageSize: 10,
      }).then(({ data }) => {
        console.log(data);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.item-box.info-box {
  height: 70vh;
  :deep(.el-table__body-wrapper.is-scrolling-none) {
    height: calc(100% - 47px);
    overflow-y: scroll;
  }
}
</style>
