<template>
  <div>
    <div style="display: flex">
      <div style="width: 95%">
        <el-table
          :data="data.contactPerson"
          border
          style="height: 175px"
          row-key="id"
          size="small"
          class="el-table__body-wrapper tbody"
          highlight-current-row
          @row-click="rowickContactPerson"
          ref="data.contactPerson"
        >
          <el-table-column prop="display_name" label="姓名" />
          <el-table-column prop="title" label="职务" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column prop="creatorName" label="创建者" width="" />
          <el-table-column prop="creationTime" label="创建时间" width="200">
            <template slot-scope="scope">
              {{ scope.row.creationTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="lastModifierName" label="修改者" />
          <el-table-column
            prop="lastModificationTime"
            label="修改时间"
            width="200"
          >
            <template slot-scope="scope">
              {{ scope.row.lastModificationTime | dateFormat }}
            </template>
          </el-table-column>
        </el-table>
        <el-table
          :data="data.contactPerson"
          border
          style="height: 175px"
          row-key="id"
          size="small"
          class="el-table__body-wrapper tbody"
          highlight-current-row
          @row-click="rowickContactPerson"
          ref="data.contactPerson"
        >
          <el-table-column prop="contact_method_type" label="类型" />
          <el-table-column prop="contact_method_value" label="联系方式" />
          <el-table-column prop="creatorName" label="创建者" width="" />
          <el-table-column prop="creationTime" label="创建时间" width="200">
            <template slot-scope="scope">
              {{ scope.row.creationTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="lastModifierName" label="修改者" />
          <el-table-column
            prop="lastModificationTime"
            label="修改时间"
            width="200"
          >
            <template slot-scope="scope">
              {{ scope.row.lastModificationTime | dateFormat }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-left: 10px; margin-top: 5%">
        <div style="margin-top: 10px">
          <el-button type="primary" @click="addContactPerson">新增</el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button type="success" @click="editContactPerson">编辑</el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button type="danger" @click="delContactPerson">删除</el-button>
        </div>
      </div>
    </div>
    <!-- 联系人 -->
    <el-dialog title="新增" :visible.sync="dialogContactPerson" width="80%">
      <el-form
        :model="formContactPerson"
        ref="formContactPerson"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="结果">
              <el-input v-model="formContactPerson.result"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="">取 消</el-button>
        <el-button type="primary" @click="">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { yzstr } from "@/utlis/validate";
import {
  getporjectlists,
  projectlist,
  addproject,
  priceitemlist,
  posjrctid,
  projectedit,
  projectdeleft,
  projttitem,
  projectdreog,
} from "@/request/commonapi";
import { unitlist } from "@/request/systemapi";
import Sortable from "sortablejs";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import CustomerOrgTree from "../../components/customerOrg/customerOrgTree.vue";
import CustomerOrgEdit from "../../components/customerOrg/customerOrgEdit.vue";
import CustomerOrgRegister from "../../components/customerOrg/customerOrgRegister.vue";
export default {
  components: {
    CustomerOrgTree,
    CustomerOrgEdit,
    CustomerOrgRegister,
  },
  data() {
    return {
      data: {
        contactPerson: [],
      },
      form: {
        displayName: "",
        englishShortName: "",
        itemTypeId: "",
        price: "",
        priceItemId: "",
        unitId: "",
        defaultResult: "",
        referenceRangeTypeFlag: "",
        isProduceSummary: "",
        isNameIntoSummary: "",
        isDiagnosisFunction: "",
        diagnosisFunction: "",
        isCalculationItem: "",
        calculationFunction: "",
        isContinueProcess: "",
        resultTemplateTypeFlag: "",
        inputCheck: "",
        isActive: "",
      },

      dialogContactPerson: false, //联系人弹窗 显示控制
      dialogContactMethod: false, //联系方式弹窗 显示控制

      formContactPerson: {}, //联系人form表单数据

      formContactMethod: {}, //联系方式form表单数据

      rules: {
        displayName: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        englishShortName: [
          { required: true, message: "请输入英文缩写", trigger: "blur" },
        ],
        itemTypeId: [
          { required: true, message: "请输入项目类别", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        priceItemId: [
          { required: true, message: "请输入价表项目编码", trigger: "blur" },
        ],
        unitId: [{ required: true, message: "请输入单位", trigger: "blur" }],
        defaultResult: [
          { required: true, message: "请输入默认结果", trigger: "blur" },
        ],
        referenceRangeTypeFlag: [
          { required: true, message: "请输入参考范围类别", trigger: "blur" },
        ],
        isProduceSummary: [
          { required: true, message: "请选择是生成小结", trigger: "blur" },
        ],
        isNameIntoSummary: [
          { required: true, message: "请输择称进入小结", trigger: "blur" },
        ],
        isDiagnosisFunction: [
          { required: true, message: "请选择启用诊断函数", trigger: "blur" },
        ],
        diagnosisFunction: [
          { required: true, message: "请输入诊断函数", trigger: "blur" },
        ],
        isCalculationItem: [
          { required: true, message: "请选择计算项目", trigger: "blur" },
        ],
        calculationFunction: [
          { required: true, message: "请输入计算函数", trigger: "blur" },
        ],
        isContinueProcess: [
          { required: true, message: "请选择继续处理", trigger: "blur" },
        ],
        resultTemplateTypeFlag: [
          {
            required: true,
            message: "请输入结果模板类别标志",
            trigger: "blur",
          },
        ],
        inputCheck: [
          { required: true, message: "请选择结果校验公式", trigger: "blur" },
        ],
        isActive: [{ required: true, message: "请选择启用", trigger: "blur" }],
      },

      isshow: false,
    };
  },

  created() {},

  //挂载完成
  mounted() {},

  methods: {
    //联系人 相关操作
    addContactPerson() {
      this.$message.success("新增 addContactPerson");
    },
    editContactPerson() {
      this.$message.success("编辑 editContactPerson");
    },
    delContactPerson() {
      this.$message.success("删除 delContactPerson");
    },

    rowickContactPerson() {
      this.$message.success("rowickContactPerson");
    },
  },
};
</script>
<style scoped>
</style>