<template>
  <div>
    <el-descriptions class="margin-top" :column="4" :size="'medium'" border style="margin-bottom: 1rem">
      <template slot="extra">
        <el-button v-if="createTicketType" type="success" size="small">新增客户信息</el-button>
        <el-button v-if="createTicketType" type="primary" size="small">完善更多客户信息</el-button>
        <el-button type="primary" size="small">选择业务</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          用户选择
        </template>
        <UserChoose />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          姓名
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          手机
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          车架号
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          车牌
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          品牌车系
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          保险到期
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          年检到期
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          进厂时间
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          预计完工
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          上次里程
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          本次里程
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item :span="3">
        <template slot="label">
          备注
        </template>
        <el-input disabled />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          服务顾问
        </template>
        <StaffChoose />
      </el-descriptions-item>
    </el-descriptions>
    <el-row v-if="createTicketType" :gutter="5" style="margin-bottom: 1rem">
      <el-col :span="4.8">
        <el-button size="small">维修建议</el-button>
      </el-col>
      <el-col :span="4.8">
        <el-button size="small">质保说明</el-button>
      </el-col>
      <el-col :span="4.8">
        <el-button size="small">终检</el-button>
      </el-col>
      <el-col :span="4.8">
        <el-select size="small">
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <el-select size="small">
        </el-select>
      </el-col>
    </el-row>
    <TicketItem item-type="project" />
    <TicketItem v-if="createTicketType" item-type="part" />
    <TicketItem v-if="createTicketType" item-type="other" />
    <el-row :gutter="createTicketType ? 2 : 3" style="margin-top: 1rem">
      <el-col :span="createTicketType ? 12 : 16">
        <el-descriptions class="margin-top" :column="createTicketType ? 2 : 3" border :size="'medium'" style="margin-bottom: 1rem">
          <el-descriptions-item>
            <template slot="label">
              工单号
            </template>
            <el-select size="small" >
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              时间
            </template>
            <el-input size="small" />
          </el-descriptions-item>
          <el-descriptions-item v-if="!createTicketType">
            <template slot="label">
              备注
            </template>
            <el-input />
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col v-if="createTicketType" :span="12">
        <el-descriptions class="margin-top" :column="5" :size="'medium'"
        style="margin-left: 1rem;margin-top: 1rem">
          <el-descriptions-item label="数量">0</el-descriptions-item>
          <el-descriptions-item label="项目">0</el-descriptions-item>
          <el-descriptions-item label="配件">0</el-descriptions-item>
          <el-descriptions-item label="附加">0</el-descriptions-item>
          <el-descriptions-item label="合计">0</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col v-else :span="8" style="margin-top:1rem;display: flex;justify-content: right">
        <el-button type="danger">结算</el-button>
        <el-button type="warning">挂单</el-button>
      </el-col>
    </el-row>
    <el-row v-if="createTicketType" :gutter="2">
      <el-col :span="12">
        <el-descriptions border class="margin-top" :column="1" :size="'medium'">
          <el-descriptions-item>
            <template slot="label">
              备注
            </template>
            <el-input />
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="12" style="margin-top:1rem;display: flex;justify-content: right">
        <el-button type="danger">结算</el-button>
        <el-button type="success">完成</el-button>
        <el-button type="primary">通知施工</el-button>
        <el-button type="primary">领料</el-button>
        <el-button type="primary">退料</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import UserChoose from "@/views/repair/Components/UserChoose.vue";
import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
import TicketItem from "@/views/repair/tickets/Components/TicketItem.vue";

export default {
  name: "UserInfo",
  components: {TicketItem, StaffChoose, UserChoose},
  props:{
    createTicketType:{
      type: Boolean,
      defaultValue: true,
      required: true,
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="scss">

</style>
