<template>
  <div class="ele-body ele-body-card">
    <el-card shadow="never pd10">
      <el-form label-width="100px" class="customer-info-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户姓名">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码">
              <el-input v-model="form.mobile" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属门店">
              {{ form.biz }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <car-model-selector
              type="brandSeries"
              title="关注车型"
              :model-value="form.selectedCar"
              v-model="form.selectedCar"
              @update:modelValue="handleCarChange"
            />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户等级">
              {{ form.level }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信好友">
              {{ form.wx_name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户位置">
              {{ form.poi }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户来源">
              {{ form.of_title }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="建档时间">
              {{ form.c_time }}
            </el-form-item>
          </el-col>
        </el-row>
        <!--
        <el-row>
          <el-col :span="12">
            <el-button type="success">保存</el-button>
          </el-col>
        </el-row>
        -->
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="receiverCustomerOptTables"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>跟进记录</template>
        <!-- 操作列 -->
        <template v-slot:content="{ row }">
          <template v-if="row.rec_url">
            <audio controls="controls">
              <source :src="row.rec_url" />
            </audio>
          </template>
          <template v-else-if="row.rec_text">
            {{ row.rec_text }}
          </template>
          <template v-else>{{ row.log }}</template>
          <div v-if="row.imgs">
            <template v-for="(item, index) in row.imgs">
              <el-image
                style="width: 100px; height: 100px"
                :src="item"
                :key="index"
                :preview-src-list="row.imgs"
              ></el-image>
            </template>
          </div>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import { getCustomer, pageCustomerOptLog } from '@/api/receiver/customer';
  import CarModelSelector from '@/components/CarSelector/index.vue';
  const ROUTE_PATH = '/receiver/customer/detail';
  export default {
    name: 'receiverCluesDetail',
    components: { CarModelSelector },
    data() {
      return {
        loading: false,
        form: {
          id: '',
          name: '',
          mobile: '',
          c_time: '',
          en_time: '',
          selectedCar: {},
          wxgr: 0,
          provinceCity: [],
          level: '',
          wx_name: '',
          of_title: '',
          biz: '',
          poi: ''
        },
        title: '',
        // 表格列配置
        columns: [
          {
            prop: 'uname',
            label: '操作人员',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'content',
            slot: 'content',
            label: '内容',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'type_name',
            label: '类型',
            align: 'center',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'c_time',
            label: '时间',
            align: 'center',
            width: 200,
            resizable: false,
            showOverflowTooltip: true
          }
        ]
      };
    },
    created() {},
    methods: {
      query() {
        const id = this.$route.query.id;
        if (!id || this.form.id === Number(id)) {
          return;
        }
        this.loading = true;
        getCustomer({ id: Number(id) })
          .then((data) => {
            this.loading = false;
            this.$util.assignObject(this.form, { ...data });
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        where['id'] = this.form.id;
        return pageCustomerOptLog({ ...where, ...order, page, limit });
      },
      /* 刷新表格 */
      reload() {
        if (this.$refs.table && typeof this.$refs.table.reload === 'function') {
          this.$refs.table.reload({ page: 1, where: this.where });
        } else {
          console.warn('表格引用或 reload 方法不存在');
        }
      },
      handleCarChange(carInfo) {
        this.form.selectedCar = carInfo;
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== ROUTE_PATH) {
            return;
          }
          this.title = this.$route.query.title
            ? this.$route.query.title
            : '客户详情';
          this.form.id = this.$route.query.id;
          setPageTabTitle(this.title);
          this.query();
          this.reload();
        },
        immediate: true
      }
    }
  };
</script>
<style scoped>
  .pd10 {
    padding: 10px;
  }
</style>
