<template>
  <div>
    <crumbs title="医学术语关系-添加" linkTo="/admin/LT-YXSYKWH-YXSYGXWH"></crumbs>
    <div class="contents">
      <div class="content">
        <p>明细</p>
        <div class="search">
          <span>起始术语搜索：</span>
          <el-input size="small" v-model="firstInput" placeholder="输入术语"></el-input>
        </div>
        <div class="search">
          <span>终点术语搜索：</span>
          <el-input size="small" v-model="endInput" placeholder="输入术语"></el-input>
        </div>
        <table class="deptbox">
          <tr>
            <td>起始术语</td>
            <td>类型</td>
            <td>关系</td>
            <td>终点术语</td>
            <td>类型</td>
          </tr>
          <tr>
            <td>
              <span>起始术语</span>
            </td>
            <td>
              <el-select v-model="data.firstType" clearable placeholder="请选择" size="mini">
                <el-option
                  v-for="item in data.typeList"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="data.relation" clearable placeholder="请选择" size="mini">
                <el-option
                  v-for="item in data.typeList"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key">
                </el-option>
              </el-select>
            </td>
            <td>
              <span>终点术语</span>
            </td>
            <td>
              <el-select v-model="data.endType" clearable placeholder="请选择" size="mini">
                <el-option
                  v-for="item in data.typeList"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key">
                </el-option>
              </el-select>
            </td>
          </tr>
        </table>
        <div class="btn">
          <el-button
            type="primary"
            @click="comfirn"
          >确 定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    name:'AddMedicalRelation',
    data(){
      return{
        data:{
          type:'',
          typeList:[
            {
              name:'类型1',
              id:1,
              key:1
            },
            {
              name:'类型2',
              id:2,
              key:2
            },
            {
              name:'类型3',
              id:3,
              key:3
            },
          ]
        },
        firstInput:'',
        endInput:'',
        relation:'',
        firstType:'',
        endType:''
      }
    },
    methods:{
      comfirn(){

      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../../less/admin.less";
  .content{
    background: #fff;
    padding: 20px 20px 30px;
    color: #545455;
    .search{
      width: 185px;
      display: inline-block;
      margin: 20px 255px 25px 0;
      .el-input--small{
        margin-top: 8px;
      }
    }
  }
  .deptbox{
    // width: 100%;
    background: #fff;
    padding: 20px 10px 30px;
    font-size: 14px;
    text-align: left;
    border-collapse: collapse;
    >tr{
      height: 30px;
      text-align: center;
      td{
        width: 135px;
        border: 1px solid #666;
        padding:5px;
      }
      input{
        border:none;
        width: 100%;
      }
    } 
  }
  .btn {
    text-align: right;
    margin-top: 20px;
  }
</style>